Показать сообщение отдельно
  #9 (permalink)  
Старый 24.04.2020, 17:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

bootstrap лимитированный показ модального окна
Georgian,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>

 <script>

$(function() {
/*
num - сколько раз запускать, число
key - где хранить, любое название
fn - что запускать, функция
duration - период запуска для num, время в ms, например сутки  24 * 60 * 60 * 1000

 */

(function(num, key, fn, duration) {
var ar = JSON.parse(localStorage.getItem(key) || "[]");
var date = new Date;
ar = ar.filter(function(time) {
  return  time > date.getTime()
});
if(ar.length < num) {
   ar.push(date.getTime() + duration);
   localStorage.setItem(key, JSON.stringify(ar));
   fn(ar.length)
}
})(3, 'depository', function(length) {
setTimeout(() => $("#image-modal").modal('show'), 4000) ;
}, 24 * 60 * 60 * 1000)
// три раза в сутки показ модального окна, через 4 секунды после загрузки страницы

});
</script>

</head>

<body>

<div class="modal fade" id="image-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">

        <div class="modal-title">Модальное окно</div>

      </div>
      <div class="modal-body">
       Содержание
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
    </div>
    </div>
  </div>
</div>
<!-- Модальное окно (end)-->


</body>
</html>
Ответить с цитированием