Всплывающее окно при посещении сайта с задержкой

Задача:

Как показать модальное окно, когда посетитель пришёл на сайт первый раз. Например через 5 минут.

Условия:

  1. Посетитель пришёл первый раз (проверяем Cookie);
  2. Окно появляется через определённый промежуток времени, например через 5 минут;
  3. Обязательное наличие кнопки с надписью «Больше не хочу видеть это окно»
  4. При закрытии окна, больше его не показывать этому пользователю (записываем в Cookie)


Решение:
1 Подключить следующие плагины:
<script src="http://yastatic.net/jquery/2.1.4/jquery.min.js"></script>
<script src="http://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script>
2 Контейнер всплывающего окна
<div id="popup-first-visit">
  <div class="underlay"></div>
  <div class="modal">
    <div class="modal-title">
      <h3>Заголовок окна!</h3>
    </div>

    <div class="modal-body">
      <form action="">
      	... Содержание формы ...
      </form>
    </div>

    <div class="modal-footer">
      <p>Больше не хочу видеть это окно</p>
    </div>
  </div>
</div>
3 JS код инициализации
<script>
	// Если нет куки HideModal
	if(!$.cookie('HideModal'))
	{
		// Покажем окно с id="popup-first-visit" через 300000 миллисекунд
		setTimeout("document.getElementById('popup-first-visit').style.display='block'", 300000);
		// Установим куки HideModal, не показывать окно в течении 365 дней
		$.cookie('HideModal', true, { expires: 365, path: '/' });
	}
</script>
Изменено: 07 12 2017
Просмотров: 2607