< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Приятные полезности для сайта » Показываем всплывающее окно на сайте один раз

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

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

Приветствую всех посетителей моего блога. Один раз передо мной встала задача сделать модальное (всплывающее) окно с формой подписки на сайте. Окно должно было показаться спустя 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 сек.

Читайте также:  FlexMenu - сворачивающееся адаптивное меню на jQuery

Открывает окно событие $.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 можете скачать на официальном сайте плагина.

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

Заур Магомедов
Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (2 оценок, среднее: 5,00 из 5)
Загрузка...

Проверка орфографии

Система Orphus

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

  • Дмитрий Авг 11, 2019 в 17:25

    Спасибо Заур! Отличная работа. Установили на своем сайте, работает классно! Такое окно не сильно отталкивает пользователя, не понравилось — закрыл и дальше познавать сайт) А вот если куки убрать или показывать всплывающие окно часто то это минус для пользователя

    • Заур Магомедов
      Заур Магомедов Авг 11, 2019 в 18:00

      Спасибо! Конечно, показывать окошко с каждой перезагрузкой страницы это слишком… Будет раздражать — это ещё мягко сказано

  • Вадим Июл 10, 2019 в 0:30

    Заур доброго времени суток! Реализовал ваш урок на своем сайте, все окей но есть один баг! Посетитель должен находится указанное время на одной странице, если будет переход на другую страницу сайта, время начинает отсчитываться по новой и так до того момента пока указанное время человек не проведет на одной единственной странице. Не подскажите как это можно исправить? Заранее огромное спасибо!

    • Заур Магомедов
      Заур Магомедов Июл 10, 2019 в 9:49

      Здравствуйте Вадим! Куки вроде для домена устанавливаются, а не для страницы. Не замечал это. Надо проверить, установив маленькое время жизни.

      Как исправить — надо смотреть. Честно сказать во времени я сильного ограничен в данный период времени. Поэтому обещать не буду. По возможности только если…

  • роман Июл 02, 2019 в 16:14

    а как сделать то что внизу у вас на сайте показывает сообщение об этих самих куках? и другая сторона. если я не согласен на куки и покину сайт через сколько-то секунд пока дочитаю или посмотрю и закрою всплывающее окно подписки. а сайт уже мне установил куку чтобы не показывать окно подписки повторно.

    • Заур Магомедов
      Заур Магомедов Июл 04, 2019 в 0:46

      Такое же окошко если у вас wordpress можно создать с помощью плагина. Не помню его название, погуглите, найдёте сразу.
      На счет того, что не согласны с куками — просто покиньте сайт и не возвращайтесь на него и все.

  • jooker Июн 23, 2019 в 16:30

    Что-то пошло не так. Пробую на простой HTML странице. Окно появляется колеблясь, закрывается по клику, но снова появляется после перезагрузки страницы.
    Вероятно, что для обычной страницы ещё должно быть что-то?

  • jooker Июн 23, 2019 в 15:02

    «Сначала подключим стили для Magnific Popup.»
    Конечно, стиль окна должен и будет индивидуальным, но, гораздо проще отталкиваться от готового результата. Надеюсь, что Заур не сильно будет ругать меня, если укажу ссылку на стиль всплывающего окна.
    http://demo.zaurmag.ru/templates/template_joomla_3/css/magnific-popup.css

  • Егор Мар 30, 2019 в 9:56

    Здравствуйте. Мне нужно вспл окно с куками для показа сообщения об успешной регистрации. Спасибо.

  • Илона Фев 02, 2018 в 22:58

    Не знаю как других, но меня всплывающие окна отталкивают. Может только в конце, прочитав все, уходя предложить подписаться или…

    • Заур Магомедов
      Заур Магомедов Фев 02, 2018 в 23:40

      Меня тоже, но тем не менее этот маркетинговый инструмент дает хорошую конверсию.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]