Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.04.2020, 12:57
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 49

Открытие/Закрытие модального окна Bootstrap по таймеру
Народ подскажите как сделать открытие модального Bootstrap окна в определенный промежуток времени к примеру когда я провожу акции чтобы я мог модальное окно раз в сутки или раз в неделю выводить.

Только чтобы все было максимально просто.

Очень важно чтобы окно ещё и закрывалось как и все стандартные модальные окна boostrap с помощью нажатия на X, свободную область или на ESC.

Ломаю уже второй день голову никак не могу собрать скрипт.

На данный момент добрался до такого решения:
var modalDate = sessionStorage.getItem('modalDate'), today = new Date();
if (modalDate === null || daydiff(modalDate, today) !== 0) {
$("#popmodal").modal('show');
sessionStorage.setItem('modalDate', today.toString());
}
function daydiff(md, td) {
  if (typeof md === 'string') {
    md = new Date(md);
  }
  return Math.round((td - md) / (5000 * 60 * 60 * 24));
}

#popmodal то самое окно которое я хочу вызывать.

Но не совсем понятно как работает данный скрипт, и что значит: 5000 * 60 * 60 * 24.

ЗАДАЧА: получить возможность указывать условия показов:
К примеру:
1) Открывать окно через N секунд после того как будет загружена страница;
2) Открывать окно N количество раз в день;
3) Открывать окно при первом посещении (независимо от 1 и 2 пункта условий)

Последний раз редактировалось Georgian, 24.04.2020 в 15:06.
Ответить с цитированием
  #2 (permalink)  
Старый 24.04.2020, 14:18
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

sessionStorage это не Cookies, это работает только в течении сессии, что не обязательно будет равно суткам, а уж тем более неделю.
Ответить с цитированием
  #3 (permalink)  
Старый 24.04.2020, 14:57
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 49

А можно получить пример решения?
Ответить с цитированием
  #4 (permalink)  
Старый 24.04.2020, 15:36
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Пример чего?

Открывать окно N количество раз в день - для кого и что считать днем? Возможно и будет у вас посетитель сидеть на странице сутки, но вряд ли, если только медом не намазано. Значит запускайте таймер при загрузке страницы и выполняйте условия по времени. Хранить ли историю в хранилище дабы учитывать показывалось или нет, решайте сами, но это должно быть локальное хранилище, а не сессионное.
Ответить с цитированием
  #5 (permalink)  
Старый 24.04.2020, 16:08
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 49

Ок можно пример? какое идельное решение на ваш взгляд?
Ответить с цитированием
  #6 (permalink)  
Старый 24.04.2020, 16:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Georgian,
https://javascript.ru/forum/jquery/7...tml#post516710
Ответить с цитированием
  #7 (permalink)  
Старый 24.04.2020, 16:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Опишите массивом/объектом расписание, по которому таймер и будет показывать нужное. А вот что касается периода за день/неделю, как поступать, это вам виднее.
Ответить с цитированием
  #8 (permalink)  
Старый 24.04.2020, 16:37
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 49

Сообщение от рони Посмотреть сообщение
Georgian,
https://javascript.ru/forum/jquery/7...tml#post516710
Это немного другое нежели то что я описал в описании.
Рони. можете помочь с решением? я новичок

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

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавить функцию автоматического закрытия модального окна по таймеру? lamo Общие вопросы Javascript 2 09.02.2020 16:44
Отправка данных AJAX из модального окна r06otyaga jQuery 0 15.11.2015 19:28
FancyBox: Размер модального окна больше размеров окна браузера (высота), как сделать? clgs Events/DOM/Window 3 22.01.2015 17:13
Закрытие модального окна bootstrap по [Esc] Yaroma11 Библиотеки/Тулкиты/Фреймворки 5 22.05.2014 11:22
Закрытие модального окна от bootstrap carroty jQuery 0 11.10.2013 01:54