显示后如何自动隐藏警报框?

IT技术 javascript
2021-01-26 11:01:13

我想要做的就是,如何在显示后的特定秒内自动隐藏警报框?

我只知道,

setTimeout(function() { 
      alert('close'); 
}, 5000);

// This will appear alert after 5 seconds

不需要这个我想在几秒钟内显示后消失警报。

需要的场景:

  1. 显示警报

  2. 在 2 秒内隐藏/终止警报

4个回答

tldr; jsFiddle 演示

警报无法实现此功能。但是,您可以使用 div

function tempAlert(msg,duration)
{
 var el = document.createElement("div");
 el.setAttribute("style","position:absolute;top:40%;left:20%;background-color:white;");
 el.innerHTML = msg;
 setTimeout(function(){
  el.parentNode.removeChild(el);
 },duration);
 document.body.appendChild(el);
}

像这样使用它:

tempAlert("close",5000);
到目前为止它太接近解决方案了,我会尝试一下。
2021-03-16 11:01:13
您好在 parentNode 上得到 null...在线 el.parentNode.removeChild(el);...如何修复它。
2021-04-05 11:01:13
谢谢 Travis,我需要警报而不是自定义警报
2021-04-12 11:01:13

您无法使用 Javascript 关闭警报框。

但是,您可以改用窗口:

var w = window.open('','','width=100,height=100')
w.document.write('Message')
w.focus()
setTimeout(function() {w.close();}, 5000)
非常感谢您的支持 Mr.DoorKnob ,但我需要警报本身而不是自定义警报示例:1- 显示警报 2- 2 秒后隐藏警报
2021-03-31 11:01:13
大多数弹出窗口阻止程序会阻止新窗口显示...
2021-04-02 11:01:13
@MaherNajiEl-Ghali 那么你不能。没有办法用 JS 关闭警报。
2021-04-02 11:01:13

用 javascript 不可能。正如其他答案的建议的另一种替代方法:考虑使用 jGrowl:http : //archive.plugins.jquery.com/project/jGrowl

是的,它是一个 jQuery 插件,它显示消息看起来像咆哮消息。它具有样式和灵活性。“n 秒后消失”行为以及永久消息是内置的。试一试 )
2021-03-19 11:01:13
嗯.. 有趣的是,这是 mac 咆哮吗??, 我会在未来使用这个资源,谢谢亚历克斯先生
2021-04-08 11:01:13

您也可以尝试通知 API。下面是一个例子:

function message(msg){
    if (window.webkitNotifications) {
        if (window.webkitNotifications.checkPermission() == 0) {
        notification = window.webkitNotifications.createNotification(
          'picture.png', 'Title', msg);
                    notification.onshow = function() { // when message shows up
                        setTimeout(function() {
                            notification.close();
                        }, 1000); // close message after one second...
                    };
        notification.show();
      } else {
        window.webkitNotifications.requestPermission(); // ask for permissions
      }
    }
    else {
        alert(msg);// fallback for people who does not have notification API; show alert box instead
    }
    }

要使用它,只需编写:

message("hello");

代替:

alert("hello");

注意:请记住,它目前仅在 Chrome、Safari、Firefox 和一些移动网络浏览器中受支持(2014 年 1 月)

在此处查找支持的浏览器

这似乎在“今天的 Chrome”中不起作用,但是它可能已被新的通知 API 所取代,该 API 有点符合要求,好主意,启发了这个答案:stackoverflow.com/a/45152906/32453
2021-03-16 11:01:13