javascript - FancyBox - "Don' t 再次显示此消息“按钮?

标签 javascript jquery html fancybox fancybox-2

我在一个网站上安装了 FancyBox,当他们访问时该网站会弹出,其中包含一些信息。我想添加某种用户可以点击的按钮,它会设置一个 cookie,在大约一个月左右的时间内不显示消息。

当涉及到这样的事情时,我很没用,所以如果有人能告诉我该怎么做,那就太棒了。

这是我目前所拥有的。在底部,我添加了我认为可能是提议的 cookie 的 anchor (“noShow”),但我不确定它是否会像现在这样工作。在此之前,我已经为 FancyBox 加载了所有 jQuery 脚本,之后它也加载了 jquery.cookie.js。如果重要的话,我会使用最新下载的 FancyBox 2。

<script type="text/javascript"> 
function openFancy() { 
setTimeout( function() {$('#autoStart').trigger('click'); },1000);
} 

$(document).ready(function() {
    openFancy();
    $('#autoStart').fancybox();
});
</script>

<!-- This is the popup itself -->
<a id="autoStart" style="display:none" href="#autoFancybox"></a>
 <div style="display: none;">
  <div id="autoFancybox" style="width: 800px">
   <div>
    <!-- My content for the Fancybox is here -->
    <br />
    <p style="font-size:10px" align="right">
    <a id="noShow" href="#noShow">Don't me show this message again</a>
    </p>
   </div>
  </div>
 </div>

谢谢, 利亚姆。

最佳答案

除了启动 fancybox 的函数外,还创建另一个在单击按钮时设置 cookie 的过期时间 的函数:

function dontShow(){
 $.fancybox.close(); // optional
 $.cookie('visited', 'yes', { expires: 30 }); // set value='yes' and expiration in 30 days
}

... 然后验证 cookie 并决定是否启动 fancybor :

$(document).ready(function() {
    var visited = $.cookie('visited'); // create cookie 'visited' with no value
    if (visited == 'yes') {
        return false;
    } else {
        openFancy(); // cookie has no value so launch fancybox on page load
    }
  $('#autoStart').fancybox(); // bind fancybox to selector
}); // ready

...现在是您按钮的 html

<a id="noShow" href="javascript:dontShow()">Don't show this message again</a>

参见 working DEMO

关于javascript - FancyBox - "Don' t 再次显示此消息“按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13841698/

相关文章:

javascript - 当元素的大小发生变化时,调整大小事件处理程序不会被调用

java - NumberFormatException -- 验证 JSP 文件中的表单提交?

jquery - 如何将两个元素上的两个事件绑定(bind)到jquery中的一个函数?

javascript - 使 .appendTo() 适用于第一个元素?

javascript - 问题 bootstrap 3 Carousel 将高度更改为 0px,边距更改为 -.....px

javascript - Dropzone.js 上传框不会显示

javascript - 将 Materialise 导入 Aurelia 项目时遇到问题

javascript - 围绕曲线弯曲 SVG `<g>`

jquery - 检查数组是否为空或 null

javascript - Bootstrap 输入组大小