Скрипт всплывающего окна при закрытии страницы

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

Конечно, споры о том, стоит ли добавлять всплывающее окно при закрытии страницы на свой сайт будут вечными. Одни говорят, что для тех, кто добавляет его - уготовлено отдельное место в Аду, что это дико бесит, что если я решил уйти, то я уйду и никакие всплывающие окна меня не остановят, а только будут раздражать. Другие говорят, что такие всплывающие окна повышают конверсию и отлично работают.  Я думаю, попробовать стоит, а там, на основе статистики, АА и АБ тестов делать уже конкретные выводы относительной вашей ниши и продукта.

Как сделать всплывающее окно при закрытии страницы

На самом деле, я не стал мудрствовать лукаво и просто немного изменил прошлую статью, добавил несколько строчек javascript кода. Раньше, модальное окно появлялось при первом посещении сайта. Сейчас оно будет показываться только при первом посещении сайта (когда курсор покидает основную область сайта и переходит в район вкладок). Если пользователь еще раз зайдет на сайт, то у него не будет показываться это окно. Реализовано это точно так же, как и в прошлой статье, при помощи cookie. Кука хранится 7 дней, можете указать любое количество на свое усмотрение.

И еще, мы не вешаем событие на клик по крестику во вкладке, а просто проверяем положение курсора. Мы не блокируем окно, кнопки и прочее, ничего не требуем, а просто показываем окошко.

Как и в прошлый раз, будем использовать jQuery плагин arcticModal, а значит подключаем сам 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">

Теперь, чтобы работали наши cookie - добавим плагин cookies от Яндекса:

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

И подключаем скрипт config.js со следующим содержимым:

$(document).ready(function () {
  if (!$.cookie('smartCookies')) {

    $(document).mouseleave(function (e) {
      function getWindow() {
        $('.offer').arcticmodal({
          closeOnOverlayClick: true,
          closeOnEsc: true
        });
      };
      setTimeout(getWindow, 1);
      $.cookie('smartCookies', true, {
        expires: 7,
        path: '/'
      });
    });

  };
});

Если читали прошлую статью, то заметили, что ничего не поменялось, кроме того, что немного видоизменился скрипт в файле config.js. То есть просто появилось еще одно условие, которое срабатывает, когда курсор покидает область сайта, то есть находиться в районе вкладок.

Кстати, в прошлый раз забыл объяснить, что означают эти параметры:

closeOnOverlayClick: true,
closeOnEsc: true
  • closeOnOverlayClick - позволяет закрыть окно при клике на любую область в не окна.
  • closeOnEsc - закрывает окно при нажатии на Escape

Теперь о самой разметке страницы. Не изменилось ровным счетом - ничего.


<div class="modalInner">

<section class="offer">

<h2>Здесь будет ваше предложение, форма и т.п.</h2>

Можете вставить форму или предложить подписаться на вас в социальных сетях

 </section>

</div>

Немного объясню. modalInner - обертка модального окна, с display:none в стилях. offer - класс самого модального окна. Если будете менять его, то не забудьте поменять класс и в скрипте.

Вот такая простая реализация всплывающего окна при закрытии страницы. А как вы считаете, стоит ли использовать подобный эффект на сайте?

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

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

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

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

  1. dimadv7

    Забыл сказать, что понятное дело, при ctrl+f4 — страница спокойно закроется и пользователь не увидит никакого окна.

    • Никита

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

    • dimadv7

      Как реагирует адблокер на js и css? Да и на санкции от гугл не тянет. Показывается только 1 раз, а потом в куках метка, и больше не показывается.

  2. Алексей

    Спасибо Дмитрий за отличный скрипт! Протестирую на некоторых проектах!

  3. Александр

    Данный скрипт работает, если пытаемся закрыть страницу, находясь в самом верху страницы, при большом контенте это не работает, поправьте если я ошибаюсь.

    • dimadv7

      Поправил скрипт. Еще раз спасибо, что обратили внимание и отписались сюда)

  4. dimadv7

    Да, все верно, спасибо, не обратил сразу внимание даже. Попробую переделать, как время будет.

  5. сергей

    «Делать попап — Не делать?» — Зависит от уровня маркетинга на сайте (работы с клиентом) и тучи разных вещей. Можно посмотреть амерские сайты-аналоги (они впереди от 10 лет). Однако…:
    Exit Popup — посетитель уходит, не совершив ожидаемого действия, а с ним уходит и ваша зарплата, и ваши деньги, что вы потратили на его привлечение… И ВЫ НЕ ХОТИТЕ ЕГО ЗАИНТЕРЕСОВАТЬ, «пущай уходит»? Кто-то из великих амеров-маркетологов заметил:»Меня сделали богатым те, кто сказал мне «нет!» » Полагаете, он — не прав?
    И если вы посмотрите на все уже с точки зрения Exit Popup, то…вас может кардинально накрыть правильными открытиями.

  6. Александр

    Не отрабатывает. Навесил на сайт по инструкции и всё, пустота. Думал, что его давит адблок — нет, в разных браузерах — одно и то же. Сайт вот, например: http://karmenta.pro/rent/

    • dimadv7

      Ошибки, которые консоль выводит поправьте. А для проверки работоспособности, загрузите исходник — все работает. Перепроверил.

  7. Oliver

    Не хочет работать в Опере Версия 38.0.2220.31

  8. FastStone Image Viewer

    Подскажите какое значение изменить что бы открывалось при наведении на любую область сайта или при заходе на страницу

  9. dimadv7

    Ничего не понял… Может это поможет: Всплывающее окно при первом посещении сайта

  10. Константин

    Работает не правильно, окно всплывает при выходе курсора за область окна, хоть внизу хоть вверху и без клика, ошибок нет, что это может быть?

    • Владислав

      Я решил эту проблему так:

      1. Добавил разметку в html

      <div id="mark"></div> <!-- Служит маркером для всплывающего окна -->

      2. Изменил config.js

      (function($) {
        $(function() {
          if (!$.cookie('smartCookies')) {
      
            function getWindow(){
              $('.offer').arcticmodal({
                closeOnOverlayClick: true,
                closeOnEsc: true
              });
              $('#mark').addClass("good");
            };
      
            $('html').mouseleave(function (e) { if ((e.clientY < 0) && !($("#mark").hasClass("good"))) { getWindow() } });
      
          }
      
          $.cookie('smartCookies', true, {
            expires: 1,
            path: '/'
          });
      
        })
      })(jQuery)

      Так я получил решение, когда скрипт не реагирует, если курсор выходит внизу или сбоку страницы (скролл тоже работает правильно). Если будет пропускать, то можно изменить e.clientY < 0 на e.clientY < 10, к примеру, что даст небольшой зазор в 10px сверху и при наведении мышки на самый верхний край скролла будет срабатывать скрипт, что не критично, но все же… зато надежнее вроде как.

      Куки записываются на 1 день — мне так было удобнее.

    • dimadv7

      Отлично, спасибо большое, что поделились)

  11. dimadv7

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

    В статье и написано, что скрипт срабатывает, когда курсор покидает область сайта и переходит, например в район вкладок.

    И еще, мы не вешаем событие на клик по крестику во вкладке, а просто проверяем положение курсора. Мы не блокируем окно, кнопки и прочее, ничего не требуем, а просто показываем окошко.

    И вот:

    просто появилось еще одно условие, которое срабатывает, когда курсор покидает область сайта, то есть находиться в районе вкладок.

  12. Андрей

    У меня вообще ничего не сработало в демке…

  13. Степик

    а как сделать так, чтоб оно появилось только раз и больше не показывалось?

  14. Денис

    А можно сделать, так чтоб при закрытие сайта, открывалось много ссылок, и опять ссылка на свой сайт, тем самым зациклить процесс. Чтоб много много окон открывалось и закрыть нельзя было. ???
    И как сделать?

    • dimadv7

      Не знаю, не ставил такой задачи никогда и надеюсь, никогда не попаду на такой сайт))))

  15. Денис

    Спасибо за ответ, по не многу стал разбираться. Когда сделаю сайт, обязательно пришлю Вам ссылку!!! )))

  16. plumpy

    Прикольный скрипт!
    Хочу поделиться своими наблюдениями.
    Глянул у себя в вебвизоре, сколько человек пользуется при скроллинге страницы скроллбаром — оказалось реально и достаточно много.
    К сожалению, скрипт реагирует на выход мыши не только в сторону табов но и в сторону скроллера и получается, что человек, пришедший на сайт и который хочет прокрутить страницу не колесиком или пробелом 🙂 а именно мышкой тыкнуть в скроллбар — сразу получает окно, дальше пугается и уходит ))) Ну плюс к уже сказанному — да, действительно стоит сделать так, чтобы посетитель хотя бы полстраницы проскролил, а лучше сделать этот параметр кастомизированным. Например с такими настройками скрипта: 0% (то есть всегда)- 50% (половина высоты) — 100% (дошел до футера).

    • Владислав

      Читайте выше, я написал как я решил эту проблему

  17. Владимир

    Кто-то уже проводил замеры? Работает такое окно?

  18. Рита

    Не сработала демка(

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