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

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

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

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

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

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

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

  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. Мартин, какая-то ошибка в консоли была?

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

 

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