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

几个月后，我自己找到了答案。所以请检查我的新问题：
how to set cookie after 10 seconds by javascript
。
在我的回答（该问题）中，您可以看到此问题的解决方案。
谢谢

每个用户在页面加载时自动打开Bootstrap模式3次

2 个答案: