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

【问题标题】：Delay pop-up for 10 seconds, only pop up once延迟弹出10秒，只弹出一次
【发布时间】：2012-01-08 02:12:06
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery popup fancybox

【解决方案1】：

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

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

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

编辑：（2012 年 3 月 7 日）jQuery cookie 插件主页moved here。

可行解决方案的步骤：

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

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) 你的 html 代码中仍然需要有某个地方（可能是隐藏的）

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

或用于内联内容

<a id="various1" href="#target"></a>
<div style="display: none;">
 <div id="target">message to display in fancybox</div>
</div>

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

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

【讨论】：

感谢肯尼迪！！唯一的问题是您提供的 jquery cookie 插件链接已失效您知道我在哪里可以找到相关信息吗？再次感谢大家的帮助
我知道我来晚了，只想说这个答案很完美！

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你可以在javascript中使用setTimeout函数：

setTimeout(function() {
    // first wait 20 seconds before this popups
    $("#various1").fancybox();

    setTimeout(function() {
        //.. what to do after 10 seconds
    }, 10000);

}, 20000);

我希望这是你想要的？您的标题和解释令人困惑

【讨论】：

【解决方案5】：

您应该能够为此使用delay 函数：

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

【讨论】：

【解决方案6】：

您应该像这样使用 setTimeout 来延迟弹出窗口：

setTimeout("showPopup()",20000);

function showPopup() {
    if (null != $.cookie("offer_closed"))
         $("#various1").fancybox();});
}

当用户单击关闭时，使用jQuery cookie library 将 cookie（称为“offer_closed”之类的名称）设置为 true。这表明弹出窗口已经显示。

PS。从 UI 的角度来看，您应该尽量避免使用弹出窗口的解决方案。用户讨厌他们。 Try a more elegant solution like jGrowl.

【讨论】：

显示框后可以设置为true。此处示例：radarvicieux.com 15 秒左右后
您永远不会向setTimeout 提供字符串。只需传递函数名称（或函数本身）。
@Tomalak 实际上你有给它提供一个字符串。传递函数名会导致超时，但不会调用该函数。
这是因为你必须在使用之前定义函数。尝试将 setTimeout() 调用放在函数定义下方。
@Tomalak，这很有趣。如果您希望用括号指定函数，则需要将其作为字符串传递。如果您将其作为带括号的函数调用（就像普通的 js 函数一样），则该函数会立即被调用，从而使超时无效。在 FF 8.0.1 上测试

【解决方案7】：

参见下面的代码示例，页面加载 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>

【讨论】：