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

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

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

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

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

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

21 комментарий

  1. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

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

  2. Дмитрий Давыдов

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

  3. Дмитрий Давыдов

    Доброго времени суток, Дмитрий! У меня уже стоит ваша форма обр.связи, поэтому библиотека 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. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  7. Дмитрий Давыдов

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

  8. Дмитрий Давыдов

    Здравствуйте!
    Помогите, пожалуйста, вот в таком деле: я встроил ваш код на сайт, все работает отлично. Решил настроить содержимое модального окна, но забыл отключить проверку в куках того, что сайт уже посещался. В итоге, естестенно, модальное окно мне больше не показывается. Что я только не делал - никак не могу убрать проверку того, что я уже был на сайте. Помогите, пожалуйста, понять, как отключить проверку куков на время :(

    Спасибо!

    1. Дмитрий Давыдов

      Если нехотите чтобы добалялись куки, просто закоментируйте строку с подключением файла от яндекса. Если Вам надо удалить свои куки поставьте Cookie менеджер любой во всех браузерах есть они и удалите куки привзяанные к данной модификации.

  9. Дмитрий Давыдов

    Всем привет!
    Подскажите, как закрыть окно при клике на overlay. В коде функция вижу есть, но не работает. Только если добавить строку
    div class=»modalInner_close arcticmodal-close»>закрыть</div
    при клике на Закрыть, работает.

    1. Дмитрий Давыдов

      Вопрос снимается. В файле config.js строку closeOnOverlayClick: false, заменить на closeOnOverlayClick: true,

  10. Дмитрий Давыдов

    Здраствуйте, а как сделать так, чтобы окно один раз показывалось при выходе. в данный момент закрываешь его, дальше по сайту сёрфишь, пытаешься выйти, а оно опять вылезает.

  11. Дмитрий Давыдов

    Приветствую! Как регулировать количество дней жизни куки?
    Здесь?:
    $.cookie('smartCookies', true, {
    expires: 180,

    180 - это в днях?

    Спасибо!

    1. Дмитрий Давыдов

      Здравствуйте, да, все верно. полгода.

  12. Дмитрий Давыдов

    Здравствуйте. как можно сделать так чтоб в сутки выходил трижде не один раз в день.?

    1. Дмитрий Давыдов

      Alex, как вы уже пробовали? Что не получилось? какие вылезли ошибки?

  13. Дмитрий Давыдов

    Спасибо, все заработало! Все красиво о понятно, достаточно прочитать комментарии.

    1. Дмитрий Давыдов

      Серый@волкЪ, отлично. Спасибо за отзыв.

  14. Дмитрий Давыдов

    Комрады, возникла другая трабла: в всплывающее окно поставил flash-ролик, который вызывается тегом при этом ранее я дописывал в коде display=»none» при этом добилася, чтобы после закрытия окна его текста не было на сайте, но вот с роликом уже сложнее - при закрытии окна, ролик продолжает воспроизводиться, его самого не видно, а звук от него идёт(( и самое хреновое, на второй заход, модуль и ролик все равно грузится, все также, ничего не показывает, а звук идёт, при этом еще косяк - ролик грузит сайт.
    Внимание вопрос: можно ли как нибудь прописать, чтобы после закрытия окна, его форма закрывалась бы.
    Думаю как то сделать код через условие: типа, если первый раз на сайте - грузим ролик в память, если нет, то не надо.

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности