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

Задача:

Как показать модальное окно, когда посетитель пришёл на сайт первый раз. Например через 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
Просмотров: 3478

Комментарии 2

Не раскрывается суть работы данного окна, не хватает кода стилей. Да и вообще было бы неплохо засунуть сюда архив с исходными файлами. Если на это решение наткнётся "новичок", то он не сможет реализовать его на своём ресурсе.
Ответить
Этот сайт не преследует цель обучения новичков или написание подробных статей. Это шпаргалка для веб мастеров.
Ответить
Написать