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

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

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

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

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

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

Пост был обновлен: Май 26, 2017

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

Читайте также:  Стильное вертикальное меню аккордеон для сайта

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

Плагин jQuery Cookie можете скачать с моего облака или найти в интернете. Проблем, думаю, здесь не будет.

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

Пост был обновлен: Май 26, 2017

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

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

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

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

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

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

Система Orphus

    Комментариев пока нет, будьте первым.

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

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

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

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

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