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

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

Сегодня и поговорим на эту тему, и я покажу простую реализацию.

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

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

На самом деле, я не стал мудрствовать лукаво и просто немного изменил прошлую статью, добавил несколько строчек 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

52 комментария

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      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 день - мне так было удобнее.

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

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

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

      Ничего не понимаю, куда вставлять этот ?
      Что в себе содержат классы #mark и .good, которые есть в коде скрипта:
      $('#mark').addClass("good");

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

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

      Слетели фрагменты кода, которые выше отмечал.
      Не ясно куда ставить этот

      <div id="mark"></div>

      или что им надо оборачивать?

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

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

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

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

    И вот:

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

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

      Как сделать чтобы элемент был не виден на странице, а только при всплывании окна?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    демка не работает

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

      Демка работает только на хостинге, там не прописаны абсолютные пути с https:// а прописаны // вот поэтой причине не работает на локалке. Поправьте путь к Яндекс кукам //yandex.st/jquery/cookie/1.0/jquery.cookie.min.js и всё заработает.

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

    Здравствуйте!
    А как сделать, чтобы окно появлялось всегда, а не только при первом посещении?

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

      Не использовать куки

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

    Окно появляется каждый раз при наведении курсора к области вкладок, то есть, в первый раз появилось окно, закрыли его, снова наводим мышь на область вкладок и окно вновь появляется... возможно как то это исправить?))

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

      Все, решил проблему)))

      $r = 1;
      $(document).ready(function () {
      if (!$.cookie('smartCookies')) {

      $(document).mouseleave(function (e) {
      function getWindow() {
      if (e.pageY - $(window).scrollTop() <= 1 && $r == 1) {
      $r = 0;
      $('.offer').arcticmodal({
      closeOnOverlayClick: true,
      closeOnEsc: true
      });
      };
      };

      setTimeout(getWindow, 1);
      $.cookie('smartCookies', true, {
      expires: 7,
      path: '/'
      });
      });

      };
      });

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

      Отличный вариант! единственное что хочу дополнить, когда скопировал скрипт в консоли выдавало ошибку и ругалось на строку:

      if (e.pageY — $(window).scrollTop() <= 1 && $r == 1)

      В общем, чтобы это решить нужно "e.pageY — $(window)" вместо тире "—" поставить минус "-", и все работает!

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

      Спасибо, что откликнулся и сообщил)

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

    ЗАЧЕМ нужны тут кукисы ???

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

      Чтобы срабатывало один раз.

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

    Дмитрий, здравствуйте. Подскажите пожалуйста, в чём может быть проблема? На страничке __http://басспром.рф/ ставлю всё как Вы указываете, но не работает ни окно при курсоре на вкладках, ни окно, всплывающее по таймеру.

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

      Не вижу подключенных скриптов на вашей странице

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

    __https://codepen.io/leon9208/pen/NjMLXe?editors=0110

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

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

    Здравствуйте, а как выключить на мобильной версии сайта?

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

    Скачал исходники. Во 1. Не работает при включенном Adblock'e. Во вторых никакое это не окно при уходе с сайта. Окно открывается при заходе на сайт примерно через 3 секунды. и все

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

    Благодарю за хороший код.
    А как сделать чтобы окно появлялось только если посетитель уходит сразу как зашел на сайт (в течении 1-7 секунд), в иных случаях чтобы окно не выводилось.

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

    mouseleave не отслеживает закрытие страницы, для этого существуют события onunload и onbeforeunload.

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

      Но мы же делали по принципу "когда пользователь подводит к вкладкам". А не пытались запретить закрытие страницы или препятствовать этому.

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

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

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

      В первом абзаце ссылка на страницу, где рассказывается как вывести окно при первом посещенении. Так вон, там устанавливается Кука на 180 дней, поставьте на нужное время и окно будет всплывать каждый день

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

    Пробовал ставить на _https://flowersberry.ru - почему-то не заработало

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

      Мартин, какая-то ошибка в консоли была?

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

    На _http://... работает. На _https://... не работает.

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

 

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