Добрый день!
Есть 3 всплывающих окна
modal-1
modal-2
modal-3
Первое окно (#modal-1) появляется при входе на сайт через 2 секунды, чтобы оно больше не появлялось использую cookie.
Как сделать, чтобы второе окно (#modal-2) появлялось при повтором заходе на сайт, но не ранее чем через 24 часа. Третье окно (#modal-3) аналогично как и второе окно, т.е третий заход на сайт, но не ранне чем через 24 часа после показа второго окна (#modal-2).
Мой код, что получилось на данный момент
(function($) {
$(function() {
if (!$.cookie('modal_shown')) {
setTimeout(function() {
jQuery("#modal-1").reveal();
}, 2000);
}
$.cookie('modal_shown', true, {
expires: 365,
path: '/'
});
})
})(jQuery)
.reveal-modal-bg {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000;
background: rgba(0, 0, 0, 0.85);
z-index: 150;
display: none;
}
.reveal-modal {
visibility: hidden;
position: absolute; top: 50%; left: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background: #00f;
z-index: 151;
}
.reveal-modal .close-reveal-modal {
text-decoration: none;
position: absolute;
top: 20px;
right: 20px;
z-index: 999;
font-size: 38px;
font-weight: 600;
cursor: pointer;
color: #fff;
background: #E33129;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 50%;
}
<div id="modal-1" class="reveal-modal">
modal-1
<a class="close-reveal-modal">×</a>
</div>
<div id="modal-2" class="reveal-modal">
modal-2
<a class="close-reveal-modal">×</a>
</div>
<div id="modal-3" class="reveal-modal">
modal-3
<a class="close-reveal-modal">×</a>
</div>