Открытие/Закрытие модального окна 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 пункта условий) |
sessionStorage это не Cookies, это работает только в течении сессии, что не обязательно будет равно суткам, а уж тем более неделю.
|
А можно получить пример решения?
|
Пример чего?
Открывать окно N количество раз в день - для кого и что считать днем? Возможно и будет у вас посетитель сидеть на странице сутки, но вряд ли, если только медом не намазано. Значит запускайте таймер при загрузке страницы и выполняйте условия по времени. Хранить ли историю в хранилище дабы учитывать показывалось или нет, решайте сами, но это должно быть локальное хранилище, а не сессионное. |
Ок можно пример? какое идельное решение на ваш взгляд?
|
|
Опишите массивом/объектом расписание, по которому таймер и будет показывать нужное. А вот что касается периода за день/неделю, как поступать, это вам виднее.
|
Цитата:
Рони. можете помочь с решением? я новичок |
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>
|
| Часовой пояс GMT +3, время: 01:23. |