0

Добрый день!

Есть 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">&#215;</a>
</div>
<div id="modal-2" class="reveal-modal">
    modal-2
    <a class="close-reveal-modal">&#215;</a>
</div>
<div id="modal-3" class="reveal-modal">
    modal-3
    <a class="close-reveal-modal">&#215;</a>
</div>

http://jsfiddle.net/45ddm4qh/

2
  • Если вы уже используете куки для хранения информации, то в первый раз запишите туда время, после которого должно отобразится третье окно, а после его отображения запишите 'yes', чтобы был флаг "все три окна уже отображены".
    – Visman
    8 авг 2015 в 8:49
  • Проблема в том, что не пойму как поставить условие - что не ранее чем через 24 часа (после первого окна) отрытие второго окна при втором заходе
    – Ivan
    8 авг 2015 в 9:07

1 ответ 1

1

Вот код для двух окон

$(document).ready(function ($) {

    var nowtime = (new Date()).getTime();
    if ($.cookie('modal_shown') == null) {
        $.cookie('modal_shown', 2, {
            expires: 365,
            path: '/'
        });
        $.cookie('modal_shown_time', nowtime + 24*60*60, {
            expires: 365,
            path: '/'
        });

        setTimeout(function () {
            $("#modal-1").reveal();
        }, 2000);

    }
    else if ($.cookie('modal_shown') == 2 &&
            parseInt($.cookie('modal_shown_time')) < nowtime) {
        $.cookie('modal_shown', 3, {
            expires: 365,
            path: '/'
        });
        $.cookie('modal_shown_time', nowtime + 24*60*60, {
            expires: 365,
            path: '/'
        });

        setTimeout(function () {
            $("#modal-2").reveal();
        }, 2000);
    }
});

В куке modal_shown храним номер окна, которое следует показывать в следующий заход. В куке modal_shown_time храним время после которого следует показать это окно.

Для третьего окна следует добавить аналогичное второму условие. Либо переписать код с использованием цикла или дополнительной функции, чтобы меньше повторений было.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.