31.05.17, 16:15
0 комментарий
  Web-Мастеру

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

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

Модальное окно работает при помощи 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. Вот теперь, точно - все. Если кому-то нужен исходник, то вот:\

шаблоны для dle 11.2

Напишите своё мнение