带有计时器的 JavaScript 警报框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1962861/
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
JavaScript alert box with timer
提问by RKh
I want to display the alert box but for a certain interval. Is it possible in JavaScript?
我想显示警报框，但要显示一定的时间间隔。在 JavaScript 中可能吗？
采纳答案by Xavi
If you want an alert to appear after a certain about time, you can use this code:
如果您希望在一段时间后出现警报，可以使用以下代码：
setTimeout(function() { alert("my message"); }, time);
If you want an alert to appear and disappear after a specified interval has passed, then you're out of luck. When an alerthas fired, the browser stops processing the javascript code until the user clicks "ok". This happens again when a confirmor promptis shown.
如果您希望警报在指定的时间间隔过后出现和消失，那么您就不走运了。当alert已经解雇，浏览器停止处理JavaScript代码，直到用户点击“确定”。当显示confirm或时，会再次发生这种情况prompt。
If you want the appear/disappear behavior, then I would recommend using something like jQueryUI's dialog widget. Here's a quick example on how you might use it to achieve that behavior.
如果您想要出现/消失的行为，那么我建议使用类似jQueryUI's dialog widget 的东西。这是一个关于如何使用它来实现该行为的快速示例。
var dialog = $(foo).dialog('open');
setTimeout(function() { dialog.dialog('close'); }, time);
回答by user3833678
May be it's too late but the following code works fine
可能为时已晚，但以下代码工作正常
document.getElementById('alrt').innerHTML='<b>Please wait, Your download will start soon!!!</b>';
setTimeout(function() {document.getElementById('alrt').innerHTML='';},5000);
<div id='alrt' style="fontWeight = 'bold'"></div>
回答by Bjorn
setTimeout( function ( ) { alert( "moo" ); }, 10000 ); //displays msg in 10 seconds
回答by Doug Neiner
In short, the answer is no. Once you show an alert, confirm, or promptthe script no longer has control until the user returns control by clicking one of the buttons.
简而言之，答案是否定的。一旦你表现出alert，confirm或prompt脚本不再具有控制，直到用户返回通过点击一个按钮控制。
To do what you want, you will want to use DOM elements like a divand show, then hide it after a specified time. If you need to be modal (takes over the page, allowing no further action) you will have to do additional work.
为了做你想做的事，你需要使用像 adiv和 show这样的 DOM 元素，然后在指定的时间后隐藏它。如果您需要模态化（接管页面，不允许进一步操作），您将不得不做额外的工作。
You could of course use one of the many "dialog" libraries out there. One that comes to mind right away is the jQuery UI Dialog widget
您当然可以使用那里的众多“对话”库之一。马上想到的是jQuery UI Dialog 小部件
回答by Steve
I finished my time alert with a unwanted effect.... Browsers add stuff to windows. My script is an aptated one and I will show after the following text.
我完成了我的时间警报，但产生了不需要的效果......浏览器向窗口添加了东西。我的脚本是改编的，我将在以下文本之后展示。
I found a CSS script for popups, which doesn't have unwanted browser stuff. This was written by Prakash:- https://codepen.io/imprakash/pen/GgNMXO. This script I will show after the following text.
我找到了一个弹出窗口的 CSS 脚本，它没有不需要的浏览器内容。这是由 Prakash 编写的：- https://codepen.io/imprakash/pen/GgNMXO。这个脚本我将在以下文本之后展示。
This CSS script above looks professional and is alot more tidy. This button could be a clickable company logo image. By suppressing this button/image from running a function, this means you can run this function from inside javascript or call it with CSS, without it being run by clicking it.
上面的这个 CSS 脚本看起来很专业，而且更整洁。此按钮可以是可点击的公司徽标图像。通过禁止此按钮/图像运行函数，这意味着您可以从 javascript 内部运行此函数或使用 CSS 调用它，而无需通过单击它来运行它。
This popup alert stays inside the window that popped it up. So if you are a multi-tasker you won't have trouble knowing what alert goes with what window.
此弹出警报保留在弹出它的窗口内。因此，如果您是一个多任务处理者，那么您就不会知道哪个窗口有什么警报。
The statements above are valid ones.... (Please allow). How these are achieved will be down to experimentation, as my knowledge of CSS is limited at the moment, but I learn fast.
以上陈述是有效的......（请允许）。如何实现这些将取决于实验，因为目前我对 CSS 的了解有限，但我学得很快。
CSS menus/DHTML use mouseover(valid statement).
CSS 菜单/DHTML 使用鼠标悬停（有效声明）。
I have a CSS menu script of my own which is adapted from 'Javascript for dummies' that pops up a menu alert. This works, but text size is limited. This hides under the top window banner. This could be set to be timed alert. This isn't great, but I will show this after the following text.
我有一个自己的 CSS 菜单脚本，它改编自 'Javascript for dummies'，它会弹出一个菜单警报。这有效，但文本大小有限。这隐藏在顶部窗口横幅下。这可以设置为定时警报。这不是很好，但我会在下面的文字之后展示这一点。
The Prakash script above I feel could be the answer if you can adapt it.
如果你能改编它，我觉得上面的 Prakash 脚本可能就是答案。
Scripts that follow:- My adapted timed window alert, Prakash's CSS popup script, my timed menu alert.
以下脚本：- 我改编的定时窗口警报、Prakash 的 CSS 弹出脚本、我的定时菜单警报。
1.
1.
<html>
<head>
<title></title>
<script language="JavaScript">
// Variables
leftposition=screen.width-350
strfiller0='<table border="1" cellspacing="0" width="98%"><tr><td><br>'+'Alert: '+'<br><hr width="98%"><br>'
strfiller1=' This alert is a timed one.'+'<br><br><br></td></tr></table>'
temp=strfiller0+strfiller1
// Javascript
// This code belongs to Stephen Mayes Date: 25/07/2016 time:8:32 am
function preview(){
preWindow= open("", "preWindow","status=no,toolbar=no,menubar=yes,width=350,height=180,left="+leftposition+",top=0");
preWindow.document.open();
preWindow.document.write(temp);
preWindow.document.close();
setTimeout(function(){preWindow.close()},4000);
}
</script>
</head>
<body>
<input type="button" value=" Open " onclick="preview()">
</body>
</html>
2.
2.
<style>
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
<script>
// written by Prakash:- https://codepen.io/imprakash/pen/GgNMXO
</script>
<body>
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
</body>
3.
3.
<HTML>
<HEAD>
<TITLE>Using DHTML to Create Sliding Menus (From JavaScript For Dummies, 4th Edition)</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- Hide from older browsers
function displayMenu(currentPosition,nextPosition) {
// Get the menu object located at the currentPosition on the screen
var whichMenu = document.getElementById(currentPosition).style;
if (displayMenu.arguments.length == 1) {
// Only one argument was sent in, so we need to
// figure out the value for "nextPosition"
if (parseInt(whichMenu.top) == -5) {
// Only two values are possible: one for mouseover
// (-5) and one for mouseout (-90). So we want
// to toggle from the existing position to the
// other position: i.e., if the position is -5,
// set nextPosition to -90...
nextPosition = -90;
}
else {
// Otherwise, set nextPosition to -5
nextPosition = -5;
}
}
// Redisplay the menu using the value of "nextPosition"
whichMenu.top = nextPosition + "px";
}
// End hiding-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
.menu {position:absolute; font:10px arial, helvetica, sans-serif; background-color:#ffffcc; layer-background-color:#ffffcc; top:-90px}
#resMenu {right:10px; width:-130px}
A {text-decoration:none; color:#000000}
A:hover {background-color:pink; color:blue}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
<div id="resMenu" class="menu" onmouseover="displayMenu('resMenu',-5)" onmouseout="displayMenu('resMenu',-90)"><br />
<a href="#"> Alert:</a><br>
<a href="#"> </a><br>
<a href="#"> You pushed that button again... Didn't yeah? </a><br>
<a href="#"> </a><br>
<a href="#"> </a><br>
<a href="#"> </a><br>
</div>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
<input type="button" value="Wake that alert up" onclick="displayMenu('resMenu',-5)">
</BODY>
</HTML>
回答by Steve
tooltips can be used as alerts. These can be timed to appear and disappear.
工具提示可以用作警报。这些可以定时出现和消失。
CSS can be used to create tooltips and menus. More info on this can be found in 'Javascript for Dummies'. Sorry about the label of this book... Not infuring anything.
CSS 可用于创建工具提示和菜单。更多信息可以在“Javascript for Dummies”中找到。抱歉这本书的标签......没有激怒任何东西。
Reading other peoples answers here, I realized the answer to my own thoughts/questions. SetTimeOut could be applied to tooltips. Javascript could trigger them.
在这里阅读其他人的答案，我意识到了我自己的想法/问题的答案。SetTimeOut 可以应用于工具提示。Javascript 可以触发它们。
回答by Adnan Hussein
If you are looking for an alert that dissapears after an interval you could try the jQuery UI Dialog widget.
如果您正在寻找在间隔后消失的警报，您可以尝试使用 jQuery UI Dialog 小部件。
