Twitter Bootstrap模态和JQuery Cookie插件

我试图让模态只弹出一次，每周。Twitter Bootstrap模态和JQuery Cookie插件

我使用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？

来源

2013-05-28 Brandon Shutter

您的复选框字段在哪里？另外，我认为你应该触发你的复选框的变化事件。 – vitozev

首先，你需要包括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>

来源

2013-05-29 13:57:13 mccannf

一样@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=/"; 
}

来源

2017-08-08 17:29:29 efirvida

Twitter Bootstrap模态和JQuery Cookie插件

回答

相关问题