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

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

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

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

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

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