Twitter Bootstrap模態和JQuery Cookie插件

Question

我試圖讓模態只彈出一次，每週。

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

Answer 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> 

Answer 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=/"; 
}