使用 cookie 每 3 天显示一次模态窗口

Question

我正在尝试将 carhartl 的 jquery.cookie.js 脚本添加到我的 modal script 中，这样只有当用户 3 天没有出现/看到模式或者用户最近清除了那里的缓存时，我才能显示模式.

这是我目前所拥有的......

此代码当前通过自动单击按钮启动模式窗口来启动我的模式，并且运行良好。 （我知道可能有一种方法可以重新工作，这样它就可以自动加载模式而不需要按钮，所以如果你能帮助我重新工作那部分，我也会很感激。）

<div style="visibility:hidden;">
   <button class="md-trigger" id="modal11" data-modal="modal-11"></button>
</div>

<script>
jQuery(function(){
   jQuery('#modal11').click();
});
</script>

但是当添加脚本添加cookie到我的模式时，我似乎遇到了一个问题，请查看下面的代码，看看我哪里出错了......

<div style="visibility:hidden;">
   <button class="md-trigger" id="modal11" data-modal="modal-11"></button>
</div>

<script>
   $(document).ready(function() {
      if ($.cookie('modal_shown') == null) {
         $.cookie('modal_shown', 'yes', { expires: 3, path: '/' });
         $('#modal11').click();
      }
   });
</script>

提前感谢您对此提供的任何帮助，非常感谢您的帮助！ ;-)

---

这是我的更新，基于 @zigdawgydawg 的帮助...但它仍然对我不起作用...

<script>
$(document).ready(function() {
   $('#modal11').click(function();
});

console.log($.cookie('modal_shown'));
   if ($.cookie('modal_shown') == null) {
      console.log('creating cookie');
   $.cookie('modal_shown', 'yes', { expires: 365, path: '/' });
   $('#modal11').click();

}
console.log($.cookie('modal_shown'));
});
</script>

Answer 1

这是一个工作示例，如果“modal_shown”cookie 不存在，则会显示一个对话框。显示模式后，将添加 cookie，使其在 3 天内不会再次显示。

演示：http://jsfiddle.net/3M9Wq/

您需要包含以下库/样式表：jQuery、jQuery UI、jQuery Cookie 插件、jQuery UI 主题 CSS。

HTML：

<div id="dialog">The dialog</div>

jQuery:

$(document).ready(function() {

    // Initialize the dialog (initially hidden)
    $('#dialog').dialog({autoOpen: false});

    // Check for the "modal_shown" cookie.  If not found, show the dialog and add the cookie
    if ($.cookie('modal_shown') == null) {
        $.cookie('modal_shown', 'yes', { expires: 3, path: '/' });
        $('#dialog').dialog("open");        
    }
});

单击按钮而不是直接打开对话框的替代 jQuery：

$(document).ready(function() {

    // Check for the "modal_shown" cookie.  If not found, click the button and add the cookie
    if ($.cookie('modal_shown') == null) {
        $.cookie('modal_shown', 'yes', { expires: 3, path: '/' });
        $('#modal11').click();     
    }
});