Bootstrap模態和cookie

Question

我創建了一個引導模式彈出窗口，它完全顯示並消失。我需要做的是檢查是否存在cookie，並且只有當用戶在站點上時才彈出一次。我也有一個關閉按鈕。目前，每次刷新頁面時都會顯示，但我不確定如何使其正常工作。我看到一些谷歌搜索的例子，但沒有爲我工作。誰能幫忙？由於

這裏是我的javascript：

$(document).ready(function() { 
    if (document.cookie != "") { 
     $("#myModal").modal("show"); 
     $("#myModalClose").click(function() { 
      $("#myModal").modal("hide"); 
     }); 
    } 
}); 

這裏是我的HTML：

<div id="myModal" class="modal fade in"> 
    <div class="inner-modal"> 
     <div class="modal-container"> 
      <p>some text</p> 
      <button class="close" data-dismiss="modal" data-target="#myModal">Hide this message</button> 
     </div> 
    </div> 
</div> 

Answer 1

你的邏輯有點回到前面。您需要檢查是否尚未設置cookie，然後顯示模式。此外，您需要事後設置cookie，以免再次發生。

$(document).ready(function() { 
 
    //if cookie hasn't been set... 
 
    if (document.cookie.indexOf("ModalShown=true")<0) { 
 
     $("#myModal").modal("show"); 
 
     //Modal has been shown, now set a cookie so it never comes back 
 
     $("#myModalClose").click(function() { 
 
      $("#myModal").modal("hide"); 
 
     }); 
 
     document.cookie = "ModalShown=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/"; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 
<div id="myModal" class="modal fade in"> 
 
    <div class="inner-modal"> 
 
     <div class="modal-container"> 
 
      <p>some text</p> 
 
      <button id="myModalClose" class="close" data-dismiss="modal" data-target="#myModal">Hide this message</button> 
 
     </div> 
 
    </div> 
 
</div>