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>