автоматическое открытие модальной загрузки при загрузке страницы 3 раза для каждого пользователя - PullRequest
Новая
       6

автоматическое открытие модальной загрузки при загрузке страницы 3 раза для каждого пользователя

0 голосов
/ 26 февраля 2019

Мне нужно, чтобы этот загрузочный модал показывался на странице при загрузке страницы, и я нашел следующий код.но есть две проблемы:

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.Вы бы правильно сделали мои коды в ответе?

1 Ответ

0 голосов
/ 26 февраля 2019

Вы можете сделать что-то, как показано ниже. 

// 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>
...