每個用戶在頁面加載時自動打開引導模式 3 次

Question

我需要通過加載頁面在頁面上顯示引導模式，我找到了以下代碼。 但有兩個問題：

1- 我希望該模式為每個用戶顯示 3 次，而不僅僅是第一次！ 朋友們，我該如何解決？
2- 我需要在許多特定頁面上顯示該模式。 我怎么能控制呢？

我的JS代碼：

// A $( document ).ready() block.
$( document ).ready(function() {
  if (document.cookie.indexOf('visited=true') == -1){
    // load the overlay
    $('#myModal').modal({show:true});

    var year = 1000*60*60*24*365;
    var expires = new Date((new Date()).valueOf() + year);
    document.cookie = "visited=true;expires=" + expires.toUTCString();

  }
});

我的 HTML 代碼：

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" style="text-align: center;" >Download on app store</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-12"><img src="" class="img-responsive" /></div>
        </div>
        <div class="row">
          <div class="col-xs-4 col-xs-offset-2"><img src="" class="img-responsive" /></div>
          <div class="col-xs-4"><img src="" class="img-responsive" /></div>
        </div>

      </div>
      <!--<div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>-->
    </div>

  </div>
</div>

先謝謝你的幫助

注意：我不熟悉 java 腳本和 jQuery。 你會在答案中正確地制作我的代碼嗎？

Answer 1

您可以執行以下操作。

 // A $( document ).ready() block. $( document ).ready(function() { var count = 0; /*if(localStorage.getItem("modal_count") === null) { } else { count = localStorage.getItem("modal_count"); }*/ count = count+1; //if(count <= 3) { $('#myModal').modal('show'); // localStorage.setItem("modal_count", count); //} });

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <button type="button" id="open_modal"> sample button</button> </body> </html> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title" style="text-align: center;" >Download on app store</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-lg-12"><img src="" class="img-responsive" /></div> </div> <div class="row"> <div class="col-xs-4 col-xs-offset-2"><img src="" class="img-responsive" /></div> <div class="col-xs-4"><img src="" class="img-responsive" /></div> </div> </div> <!--<div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div>--> </div> </div> </div>

Answer 2

幾個月后，我自己找到了答案。 所以請檢查我的新問題：
如何在 10 秒后通過 javascript 設置 cookie
.
在我的回答（那個問題）中，你可以看到這個問題的解決方案。
謝謝

每個用戶在頁面加載時自動打開引導模式 3 次

問題描述

2 個解決方案

解決方案1
0 2019-02-26 12:35:40

解決方案2
0 已采納 2020-05-10 10:03:51

每個用戶在頁面加載時自動打開引導模式 3 次

問題描述

2 個解決方案

解決方案1 0 2019-02-26 12:35:40

解決方案2 0 已采納 2020-05-10 10:03:51

解決方案1
0 2019-02-26 12:35:40

解決方案2
0 已采納 2020-05-10 10:03:51