延迟FancyBox打开*WITH* "don't show this again"链接

Delayed FancyBox open *WITH* "don't show this again" link

本文关键字：quot this show again 链接 don WITH FancyBox 延迟 打开      更新时间：2023-09-26

所以我试图结合两个不同线程给出的工作解决方案，我在这里发现:

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

2) fanybox - "Don't show this message "按钮?

我想让我的fanybox在x秒后打开，然后在xx秒后自动关闭。我把它弄得很好!

然后当我想添加链接到我的模态框设置cookie时，当用户点击它，永远不会显示框再次给他们x天，它似乎没有设置cookie来有效地做到这一点。

这是我目前得到的:

<script type="text/javascript">
    function openFancybox() {
        setTimeout( function() {$('#testbox').trigger('click'); }, 15000);
}
function dontshow(){
    $.fancybox.close(); // Use this line if I want the button to close fancybox.
    $.cookie('visited', 'yes', { expires: 7300 }); // Set the cookie.
}
$(document).ready(function() {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
     $("#testBox").fancybox({
        'hideOnContentClick': false,
        'hideOnOverlayClick': true,
        'showCloseButton': true,
        'overlayShow': true,
        'overlayOpacity': 0.3,
    }); // ready
    setTimeout( function() {$.fancybox.close(); },22000); // additive, so 15secs + 7secs open time = 22 secs
});
</script>

是的，我有JQuery cookie脚本在我的服务器上。

我怀疑调用openFancybox()两次可能是问题(我对Javascript不太了解)..但当我试图插入:

时
{
    setTimeout( function() {$('#testbox').trigger('click'); }, 15000);
}

位后:

else {
        openFancybox()

…然后我就不知道有多少{和;或者)我可能/可能不需要!

(已经测试了无尽的组合!. .这有点像在黑暗中找黑猫，而我却不知道自己在做什么……只要知道我想让它做什么!)

我的模态FancyBox的内联代码是:

<!-- INLINE FANCYBOX-->
  <a id="testbox" href="#target"></a>
<div style="display:none"><div id="target">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<br>
<a id="noShow" href="javascript:dontShow()">Don't show this message again</a>
<br>
</div></div>

我的测试页面URL: http://www.wayofthewomb.com/timed_pop_up_TESTER.html

谢谢你的建议/建议/指导!感谢这个神奇的资源，在这里!

您已经接近完成了，但是还有几个问题:

  • 最重要的是，你错过了jquery。饼干的依赖!这个插件被js-cookie取代。将其包含在您的页面中，如:

    <script src='//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.4/js.cookie.min.js'></script>

  • 你的html和JS之间有一些不匹配的大小写:注意testbox vs testBox

否则你就可以走了!

这是一个工作小提琴:http://jsfiddle.net/memeLab/pr1f1cys/8/

function openFancybox() {
    setTimeout(function () {
        $('#testbox').trigger('click');
    }, 5000);
}
function dontShow() {
    $.fancybox.close();
    // Set the cookie.
    Cookies('visited', 'yes', {
        expires: 7300
    });
}
$(document).ready(function () {
    var visited = Cookies('visited');
    if (visited == 'yes') {
        console.log('Theres a visited cookie');
        return false;
    } else {
        openFancybox();
    }
    // create an event listener: when #noShow is clicked, run dontShow
    $('#noShow').click(dontShow);
    $('#testbox').fancybox({
        'hideOnContentClick': false,
        'hideOnOverlayClick': true,
        'showCloseButton': true,
        'overlayShow': true,
        'overlayOpacity': 0.3
    });
    // additive, so 15secs + 7secs open time = 22 secs
    setTimeout(function () {
        $.fancybox.close();
    }, 22000);
});

我建议在问这类问题时使用jsfiddle或codepen等创建最基本的，简化的示例:它简化了问题，并且意味着当您的测试页面不可避免地消失时，之后的人仍然可以看到代码。

你的页面上还有几个问题值得检查:

  • 看起来像你加载jquery不止一次。可能会有问题!
  • 您已经在<style>标记中嵌套了一个html注释<!-- -->，这可能会在编辑器中抛出语法高亮显示(不会使生活变得更轻松!)
  • 我建议在DocReady上使用点击处理程序，而不是使用onClick html属性(见#noShow)

评论语法:

  • html注释:<!-- commented out -->
    • Javascript单行注释:// commented out Javascript多行/块注释:/* commented 'n out */
  • CSS注释(可能是多行):/* commented out */

希望有帮助!

相关文章：