延迟弹出10秒，只弹出一次

问题描述

您好，我正在使用 fancybox 内联弹出窗口来提醒查看促销活动.我为此使用的代码是:

$(document).ready(function() {$("#various1").fancybox();});

如何修改它，让它在 20 秒后自动弹出?但是一旦关闭它就不会再弹出了.

解决方案

实际上，以前发布的解决方案都没有在现实生活中起作用，为什么?因为这行:

$("#various1").fancybox();

不会触发fancybox，它只是将fancybox 绑定到选择器#various1，但它仍然需要单击才能触发模态框/灯箱(不是弹出窗口).顺便说一句，Gearóid 的解决方案无论如何都有语法错误.唯一真正的价值是他们建议使用 jQuery cookie 插件(旧网站).

编辑:(2012 年 3 月 7 日)jQuery cookie 插件主页 已移动这里.

可行解决方案的步骤:

A) 在 jQuery 和 fancybox js 文件之后加载 jQuery cookie 插件(按照建议)

B) 然后使用这个脚本:

<script type="text/javascript">功能 openFancybox() {setTimeout(function() {$('#various1').trigger('click'); },20000);}$(文档).ready(函数() {varvisited = $.cookie('visited');如果(访问=='是'){返回假；} 别的 {openFancybox();}$.cookie('visited', 'yes', { expires: 7 });$('#various1').fancybox();});</脚本>

C) 你的 html 代码中仍然需要有某个地方(可能是隐藏的)

<a id="various1" href="path/target"></a>

或用于内联内容

<a id="various1" href="#target"></a><div style="display: none;"><div id="target">在fancybox中显示的消息</div></div>

此外，如果您使用内联内容和 fancybox v1.3.x，请检查现有错误和解决方法 这里

PS.fancybox 不是一个弹出窗口，而是一个模态/灯箱 jQuery 插件，从 UI 的角度来看，它是一个类似于 jGrowl 的非侵入式解决方案.

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:

$(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.

解决方案

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).

EDIT: (March 07, 2012) The jQuery cookie plugin home page moved here.

Steps for a working solution:

A) Load the jQuery cookie plugin (as suggested) after jQuery and fancybox js files

B) Then use this script:

<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)

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

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.

这篇关于延迟弹出10秒，只弹出一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！