Twitter Bootstrap 模态和 Jquery Cookie 插件

Posted 2023-05-08

【中文标题】Twitter Bootstrap 模态和 Jquery Cookie 插件

【英文标题】：Twitter Bootstrap Modal and Jquery Cookie Plugin

【发布时间】：2013-05-23 14:32:51

【问题描述】：

我试图让模态框每周弹出一次。

我正在使用 Wordpress 和 Roots 主题，并且脚本已正确入队和注册。

我的模态代码是

<div class="modal hide fade modalborder" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <div class="modal-body">
            <h2 class="modalheader">Header Here</h2>
            <p class="modalcoffee">Text here</p>
            <p class="modalcomesin">Text here</p>
        </div>
        <p class="modallearn">Text Here</p>
        <p class="modalready">Are you ready to <span class="modalstart">start</span>?</p>
        <a href="#" class="btn btn-info">Click Here</a>
    </div>
</div>

使这个节目完美运行的当前javascript：

<script type="text/javascript">
$(window).load(function()
    $('#myModal').modal('show');
);
</script>

我对 jQuery 和 javascript 知之甚少。我需要做什么才能使用 cookie？

【问题讨论】：

您的复选框字段在哪里？另外，我认为您应该为您的复选框触发更改事件。

【参考方案1】：

首先你需要像这样包含JQuery cookie plugin：

<script src="/path/to/jquery.cookie.js"></script>

那么下面的代码应该可以帮助到你：

<script type="text/javascript">
$(function()
    // If the cookie does not exist
    if ($.cookie('modalshow') === null) 
    
       // Show the modal
       $('#myModal').modal('show');
       var expiryDate = new Date();
       var hours = 168;
       expiryDate.setTime(expiryDate.getTime() + (hours * 3600 * 1000));

       // Create cookie to expire in 168 hours (1 week)
       $.cookie("modalshow", "false",  path: '/', expires: expiryDate );
    
);
</script>

【参考方案2】：

与 @mccanff 答案相同，但不使用外部库

if (document.cookie.indexOf("modalshow=true") < 0) 
    $('#myModal').modal('show');
    var expiryDate = new Date();
    var hours = 168;
    expiryDate.setTime(expiryDate.getTime() + (hours * 3600 * 1000));
    document.cookie = "modalshow=true; expires=" + expiryDate + "; path=/";