jQuery 延迟弹出10秒，只弹出一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8298886/
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
Delay pop-up for 10 seconds, only pop up once
提问by user1037444
Hi I'm using the fancybox inline pop-up to to alert a view to a promotion. The code I'm using for this is:
嗨，我正在使用fancybox 内联弹出窗口来提醒查看促销活动。我为此使用的代码是：
$(document).ready(function() {
$("#various1").fancybox();
});
How would I modify this so it automaticly popped up after, say, 20 seconds? But once it's been closed it schouldn't pop up again.
我将如何修改它，使其在 20 秒后自动弹出？但是一旦关闭它就不会再次弹出。
回答by JFK
Actually, none of the solutions posted previously work in real life, why? because the line:
实际上，之前发布的解决方案都没有在现实生活中起作用，为什么呢？因为这一行：
$("#various1").fancybox();
doesn't trigger fancybox, it just binds fancybox to the selector #various1, but it still needs a click to trigger the modal/lightbox (not a popup). BTW, Gearóid's solution has syntax errors anyway. The only real value is that they suggest the use of the jQuery cookie plugin(old site).
不触发fancybox，它只是将fancybox 绑定到选择器#various1，但它仍然需要点击来触发modal/lightbox（不是弹出窗口）。顺便说一句，Gearóid 的解决方案无论如何都有语法错误。唯一真正的价值是他们建议使用jQuery cookie 插件（旧站点）。
EDIT: (March 07, 2012) The jQuery cookie plugin home page moved here.
编辑：（2012 年 3 月 7 日）jQuery cookie 插件主页移至此处。
Steps for a working solution:
工作解决方案的步骤：
A) Load the jQuery cookie plugin (as suggested) after jQuery and fancybox js files
A）在jQuery和fancybox js文件之后加载jQuery cookie插件（按照建议）
B) Then use this script:
B) 然后使用这个脚本：
<script type="text/javascript">
function openFancybox() {
setTimeout( function() {$('#various1').trigger('click'); },20000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: 7 });
$('#various1').fancybox();
});
</script>
C) you still need to have somewhere in your html code (maybe hidden)
C）你仍然需要在你的 html 代码中的某个地方（可能是隐藏的）
<a id="various1" href="path/target"></a>
<a id="various1" href="path/target"></a>
or for inline content
或内联内容
<a id="various1" href="#target"></a>
<div style="display: none;">
<div id="target">message to display in fancybox</div>
</div>
Also, if you use inline content and fancybox v1.3.x, check for an existing bug and workaround here
此外，如果您使用内联内容和fancybox v1.3.x，请在此处检查现有错误和解决方法
PS. fancybox is not a popup but a modal/lightbox jQuery plugin, which is a non-intrusive solution like jGrowl from a UI point of view.
附注。Fancybox 不是一个弹出窗口，而是一个模态/灯箱 jQuery 插件，从 UI 的角度来看，它是一种非侵入性的解决方案，如 jGrowl。
回答by Tomalak
$(document).ready(function() {
setTimeout(function () {
$("#various1").fancybox();
}, 20000);
});
回答by Naveen Chandran
Use Timeout function. The solution for your query is below
$(document).ready(function () {
setTimeout(function() {
$('your modal id').modal('show') }, 10000); //displays modal after 10 seconds
});
回答by James Johnson
You should be able to use the delayfunction for this:
您应该能够为此使用该delay功能：
$("#various1").delay(20000).fancybox();
回答by Ger
You should use setTimeout to delay the popup like so:
您应该使用 setTimeout 来延迟弹出窗口，如下所示：
setTimeout("showPopup()",20000);
function showPopup() {
if (null != $.cookie("offer_closed"))
$("#various1").fancybox();});
}
The use the jQuery cookie libraryto set a cookie (call it something like "offer_closed") to true when the user clicks close. This then signals that the popup was already displayed.
当用户单击关闭时，使用jQuery cookie 库将 cookie（称之为“offer_closed”）设置为 true。这表明弹出窗口已经显示。
PS. From a UI point of view, you should try to avoid solutions using popups. Users hate them. Try a more elegant solution like jGrowl.
附注。从 UI 的角度来看，您应该尽量避免使用弹出窗口的解决方案。用户讨厌他们。尝试更优雅的解决方案，如 jGrowl。
回答by Yoram de Langen
You can use the setTimeoutfunction in javascript:
您可以setTimeout在 javascript 中使用该函数：
setTimeout(function() {
// first wait 20 seconds before this popups
$("#various1").fancybox();
setTimeout(function() {
//.. what to do after 10 seconds
}, 10000);
}, 20000);
I hope this is what you want? Your title and explanation is confusing
我希望这就是你想要的？你的标题和解释令人困惑
回答by IRSHAD
See the below code example, popup will open after 5 seconds on page load with a message "Welcome to site name" -
请参阅以下代码示例，页面加载 5 秒后弹出窗口将打开并显示“欢迎使用站点名称”消息 -
<head>
<script type="text/javascript">
$(document).ready(function(){
openFancybox();
$('#various1').fancybox();
});
function openFancybox() {
setTimeout( function() {$('#various1').trigger('click'); },5000);
}
</script>
</head>
<body>
<a id="various1" href="#target"></a>
<div style="display: none;">
<div id="target">welcome to shoesdekho.com</div>
</div>
</body>
