javascript 以时间为基础消失警告框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18650494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disappear the alert box with time based
提问by Dhandabani
I want to disappear the alert box after a certain amount of time. I have heard that this is impossible in Javascript, so is there another way of making this happen?
我想在一段时间后消失警报框。我听说这在 Javascript 中是不可能的，那么还有另一种方法可以实现吗？
采纳答案by ?ēēpak
Try this jsbin code - A custom alert box for you
试试这个 jsbin 代码 - 为你定制的警报框
http://jsbin.com/ibUrIxu/1/edit
http://jsbin.com/ibUrIxu/1/edit
or Try this on your .htmlfile
或者在你的.html文件上试试这个
Code
代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script>
function customAlert(msg,duration)
{
var styler = document.createElement("div");
styler.setAttribute("style","border: solid 5px Red;width:auto;height:auto;top:50%;left:40%;background-color:#444;color:Silver");
styler.innerHTML = "<h1>"+msg+"</h1>";
setTimeout(function()
{
styler.parentNode.removeChild(styler);
},duration);
document.body.appendChild(styler);
}
function caller()
{
customAlert("This custom alert box will be closed in 2 seconds","2000");
}
</script>
</head>
<body onload="caller()">
</body>
</html>
回答by TGH
You can do this by using a custom alert message. One example of a notification framework is ToastR. You can also create your own message framework. You cannot dismiss a regular JavaScript alert box though.
您可以通过使用自定义警报消息来执行此操作。通知框架的一个示例是 ToastR。您还可以创建自己的消息框架。但是，您不能关闭常规的 JavaScript 警报框。
回答by Sudarshan
Working Demo-- Here is a custom alert box and function what you need
工作演示——这是一个自定义警报框和功能你需要的
function cancelDiv() {
$("#div1").hide();
}
function ShowDiv() {
$("#div1").css("backgroundColor", "white");
$("#div1").show();
setTimeout(function(){$("#div1").hide()}, 3000)
}
$(function () {
$("#div1").hide();
$("#div1").draggable();
});
