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

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

18 289 в JavaScript 16

Приветствую всех посетителей моего блога. Один раз передо мной встала задача сделать модальное (всплывающее) окно с формой подписки на сайте. Окно должно было показаться спустя 40 сек. с начала первой загрузки сайта и причем показаться должно было один раз. Взялся — сделал. Теперь подумал, а может еще кому-то пригодится.

Давайте теперь в подробностях и с самого начала. Для модальных окон решил использовать скрипт Magnific Popup. Им я пользуюсь давно и меня он абсолютно устраивает. Про данный jquery плагин я написал подробный обзор, советую ознакомиться, т.к. особо его ниже комментировать не буду.

Как всегда, прежде, чем начать давайте сначала посмотрим на конечный результат. Модальное окошко покажется через 10 сек. после загрузки сайта. Если захотите посмотреть окошко еще раз, то очистите куки браузера. Я это делаю обычно с помощью инструмента-расширения для браузера Web Developer.

Для начала нам необходимо подключить библиотеку jQuery, если она у вас не подключена. Также подключаем плагин Magnific Popup. Следующее, мы также подключим jQuery плагин работы с Cookie. Ниже выводим код инициализации плагина модального окна. Как правильно подключать стили и скрипты я уже писал, также советую заглянуть.

Сначала подключим стили для Magnific Popup.

<link href="/css/magnific-popup.css" rel="stylesheet" />

А потом уже скрипты.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.magnific-popup.min.js"></script>
<script src="/js/jquery.cookie.js"></script>

Код вызова окна будет следующим.

<script>
 jQuery(document).ready(function($) {
  var cookieOptions = { expires: 3, path: '/' };
  if ($.cookie('visit') == undefined) {
    setTimeout(function() {
    $.cookie('visit', true, cookieOptions);
    $.magnificPopup.open({
    items: {
    src: $('#text-popup-load-window'), // может быть HTML строкой, jQuery объектом, или CSS селектором 
    },
    type: 'inline',
    removalDelay: 300
    });
  }, 10000);
 }
 }); // end ready
 </script>

В переменной cookieOptions содержится информация о времени жизни куки — expires: 3, в данном случае — 3 дня.  Далее мы проверяем (if ($.cookie(‘visit’) == undefined)), если куки не определены, то выполняем код ниже. Методом setTimeout устанавливаем время задержки показа окна. Значение устанавливается в миллисекундах — 10000, что соответствует 10 сек.

Читайте также:  Простая форма связи на Ajax

Открывает окно событие $.magnificPopup.open. Здесь особо комментировать не буду.

Теперь давайте посмотрим на HTML-код окна.

<div id="text-popup-load-window" class="zoom-anim-dialog swing animated white-popup mfp-hide">
    <p>А это показ модального окна через 10 сек. после загрузки страницы. Показ окна привязан к cookie браузера, время жизни - 3 дня.</p>
</div>

Обратите внимание на классы swing animated. Они заданы для анимации окна с помощью библиотеки animate.css. Вы можете использовать любую анимацию.

Ну вот в принципе и все. Вместо текста можно вывести любую информацию — баннер, форму связи и др.

Ссылки на скачивание библиотек

Magnific Popup можете скачать на официальном сайте плагина.

На этом все. Спасибо за внимание. Вопросы, как всегда, задаем в комментариях.

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (2 оценок, среднее: 5,00 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории