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

Всем привет. Несколько раз уже спрашивали, как сделать на посадочной странице всплывающее окно при первом посещении сайта.

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

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

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

Модальное окно будем делать при помощи 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