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

Всплывающее окно при первом посещении сайтаВсем привет. Несколько раз уже спрашивали, как сделать на посадочной странице всплывающее окно при первом посещении сайта. Это может пригодиться, чтобы собрать контакты пользователя, показать какую-то акцию или предложить что-то уникальное, но не надоедать раз за разом. Сегодня, покажу вам простую реализацию этого эффекта и буду, если что, просто давать ссылку на эту статью.

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

Как реализовать всплывающее окошко при первом посещении сайта пользователем

Модальное окно будем делать при помощи jQuery плагина arcticModal. По непонятным мне причинам, стал очень часто замечать его на различных сайтах. Попробовал - ничего необычного. Работает, вроде, - нормально. Будем использовать его.

Итак, если arcticModal - это jQuery плагин, то логично, что первым делом подключаем библиотеку jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

А затем подключаем сам плагин модального окна. Я, обычно, складываю плагины и библиотеки в папку libs, поэтому у меня получился такой путь:

<script src="libs/arcticmodal/jquery.arcticmodal.js"></script>
<link rel="stylesheet" href="libs/arcticmodal/jquery.arcticmodal.css">

У плагина есть пара тем оформления окна, но можно написать и свои. В этом примере я воспользуюсь стандартной:

<link rel="stylesheet" href="libs/arcticmodal/themes/simple.css">

Теперь, чтобы узнать, заходил ли к нам пользователь уже или нет, мы можем сделать запись в cookies. Для этого воспользуемся плагином cookies от Яндекса:

<script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>

И напишем небольшой скрипт, который и будет проверять/записывать cookies:

<script>
  (function($) {
    $(function() {
      if (!$.cookie('smartCookies')) {

        function getWindow(){
          $('.offer').arcticmodal({
            closeOnOverlayClick: false,
            closeOnEsc: true
          });
        };

        setTimeout (getWindow, 5000);
      }

      $.cookie('smartCookies', true, {
        expires: 180, 
        path: '/'
      });

    })
  })(jQuery)
</script>

Суть скрипта заключается в том, что он проверяет, если наша Кука у пользователя, если есть, то перезаписываем ее, если нет, показываем модальное окно через 5 секунд.

Теперь, давайте перейдем к самой разметке, тут все очень просто. Нужно создать контейнер (обертку) для модального окна, и в стилях прописать ей display="none". А внутри создать само модальное окно, с нужным контентом. Я дал ему класс offer:

<div class="modalInner">
 <section class="offer">
  <h2>Здесь будет ваше предложение, форма и т.п.</h2>
  <p>Можете вставить форму или предложить подписаться на вас в социальных сетях</p>
 </section>
</div>

Если будете менять класс модального окна, то не забудьте поменять его и в скрипте выше, вот тут:

$('.offer').arcticmodal({

В принципе, на этом можно заканчивать, но прошу обратить внимание на порядок подключения скриптов. Так как это модальное окно покажется только через 5 секунд, я решил подключать все файлы в футере, чтобы они не мешали загрузке основному содержимому сайта. Кроме того, скрип, который проверяет куки и отсчитывает время, через которое покажется окно, я вынес в отдельный файл config.js и поместил рядом с остальными файлами. У меня получилась такая структура:

<div class="modalInner">
  <section class="offer">
   <h2>Здесь будет ваше предложение, форма и т.п.</h2>
   <p>Можете вставить форму или предложить подписаться на вас в социальных сетях</p>
  </section>
</div>
  <link rel="stylesheet" href="libs/arcticmodal/jquery.arcticmodal.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>
  <script src="libs/arcticmodal/config.js"></script>
  <script src="libs/arcticmodal/jquery.arcticmodal.js"></script>

Это я к тому, чтобы вы не напутали в порядке подключения и у вас не возникли проблемы. Сначала стили, потом jQuery, потом cookies, а потом сам плагин arcticmodal. Вот теперь, точно - все. Если кому-то нужен исходник, то вот:

Скачать исходник с demo

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 9

  1. Иван

    Доброго времени суток, Дмитрий!
    А как на счет адаптивности всплывающего окна? Адаптивность зависит от верстки содержимого в блоке div'a с классом modalInner?
    П.С. Предыдущая тема (push-уведомления) хорошо сработала и я на эту статью перешел, кликнув по этому уведомлению.

    • dimadv7

      Здравствуйте. Здорово. Были сомнения, так как время почти 22.00 было. Но решил проверить много ли получат и перейдут)

      Окно адаптивное, центрируется само, ну а дальше да, самому уже верстать содержимое. То есть блок offer в (примере).

  2. Михаил

    Я тоже часто arcticModal замечал на сайтах. Спасибо за инфу.

  3. Yesss!

    Доброго времени суток, Дмитрий! У меня уже стоит ваша форма обр.связи, поэтому библиотека jQuery подключена в Head, все файлы собрал в _mod_files/ce_images/arcticmodal При загрузке текст в section class=»offer» сначала отображается на странице, потом уходит на всплывающее окно (собственно, окна не вижу, есть только текст на сером слое) Извиняюсь, но я не нашел, как надо выставить display=»none», в jquery.arcticmodal.css ? И куда-то потерялась кнопочка Escape (в исходнике ее нет)…
    Что посоветуете? СПАСИБО!

  4. сергей

    В HTML в div class=»modalInner» добавил style=»display: none;» — теперь при первой загрузке модальное содержание не отображается на странице, только в попапе

  5. сергей

    Вдруг разобрался…: Для закрытия вспл. окна надо в HTML после
    section class=»offer»
    добавить строку
    div class=»modalInner_close arcticmodal-close»>закрыть</div

  6. сергей

    Вот только курсор у меня при наведении на «закрыть» со стрелки превращается текстровый курсор…
    С изображениями арктикмодал, подозреваю, так и не работает

    • dimadv7

      Добавьте cursor: pointer; для закрывающей кнопки.

  7. сергей

    Все, закончил подгонку, УРА! У меня уже стоит пара статич.форм обр.спязи отсюда, теперь есть и popup (мечтаю еще на выход сделать) Для юзера уровня CMS возможно, и не плохо (глядишь, и человеком стану)
    СПАСИБО, ДМИТРИЙ!!!

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