В данной заметке приведен пример скрипта на jQuery, который откроет модальное окно при попытке посетителя покинуть страницу.

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

Уже уходите?

А у нас еще много всякого интересного!!!

+

Работает данный способ просто: Как только мышка вылезла вверх к адресной строке, вкладкам и кнопке закрытия страницы – открывается модальное окно.

Пример можно поглядеть на этой странице.

Скрипт сделан таким образом, что на одной странице окно появится только 1 раз (при обновлении страницы или на любой другой, где он подключен, окно появится снова).

Установка:

Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie.

В этом случае JS нужно поставить такой:

Еще один вариант, в котором мы не показываем всплывающее окно, если посетитель провел на сайте определенное время.

Не забудьте, что на сайте должна быть подключена библиотека jQuery.

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

Ваш комментарий отправлен!

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

  • Андрей:

    Для мобильных это все не работает, к сожалению, а знаете ли Вы как это можно реализовать на мобильных устройствах?

    Ответить
  • Валерий:

    Скрипт очень интересный и лёгкий, не надо подключать модальные плагины джейкуверти.

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

    В этой связи я подумал, а что если добавить возможное появление данного окна ТОЛЬКО в первые 15 секунд и на первой посещённой странице сайта. Ведь если пользователь будет на сайте дольше (или перейдя на другую страницу сайта), то априори он уже заинтересован — тут сохраняется идеальный баланс между отсутствием раздражения и хорошими поведенческими. А для тех, кто хочет уйти раньше 15 секунд — показывать форму поиска в модальном окне, предложив тем самым найти интересующую информацию и удержать посетителя, что улучшим поведенческие.

    Сделайте, пожалуйста, данную возможность в вашем замечательном скрипте 🙂

    Ответить
    • Alexander:

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

      window.setTimeout(function() {
      $(".exitblock").remove();
      }, 15000);

      И записываем куку, с которой окно вообще не показывается (только после того, где идет ее проверка):
      var date = new Date;
      date.setDate(date.getDate() + 1); //количество дней
      document.cookie = "alertwin=no; path=/; expires=" + date.toUTCString();

      Ее можно записать отдельно — в этом случае человек зашел и только на этой странице он может увидеть окно и то, если не прошло 15 секунд.

      Или записать в таймаут, тогда окно выскочит где то 1 раз, если на 1 странице посетитель не провел 15 секунд

      Ответить
      • Валерий:

        Не совсем понял что и куда вставлять. Я сделал так https://jsfiddle.net/ctgoqb72/ , но выведенное сообщение скрывается исходя из 15 секунд, т.е. если мышку вывели за границы окна браузера через 10 секунд, то модальное окно покажется лишь на 5 секунд и исчезнет.

        И про куку тоже не совсем понял. По логике, кука должна писаться через 15 секунд после захода на первую страницу. Т.е. пользователь зашёл на первую страничку, провёл там 30 секунд, перешёл на вторую и провёл там, к примеру, 5 секунд. И несмотря на то, что он провёл на второй странице 5 секунд, модальное окно ему уже не должно показываться, т.к. он уже формально со стороны поисковой системы считается "заинтересованным посетителем".

        Ответить
        • Alexander:

          Да, да, это я ошибся 🙁
          Добавил код в статью, попробуйте

          Ответить
          • Валерий:

            Благодарствую 🙂 Отличный код 🙂
            И если не затруднит, может есть возможность добавить коротенький звуковой сигнал при срабатывании модального окна 🙂
            На мой взгляд это дополнительно акцентирует внимание и в тоже время не является навязчивым 🙂

            Ответить
            • Alexander:

              В HTML:
              <audio class="alert"><source src="alert.mp3" type="audio/mpeg"></audio>

              В JS, там где показываем окно ( $(".exitblock").fadeIn("fast"); )
              Добавляем ниже или выше:
              $('.alert').trigger('play');
              window.setTimeout(function() {
              $(".alert").remove();
              }, 1000);
              } // Удалим его через секунду, чтобы больше не пело

              И там где не показываем окно, а просто удаляем, тоже:
              $(".alert").remove();

              Ответить
  • kwai:

    как сделать открытие окна по клику на крестик закрывающий вкладку?

    Ответить
    • Alexander:

      Не совсем понял как это, закрывающий крестик закрывает, а не открывает окно.

      А если это какой то другой крестик, то так:
      $(".class-krestika").click(function() {
      $(".exitblock").show();
      });

      Ответить
      • Анатолий:

        Не работает на маке.

        Ответить
        • mm:

          В каком браузере?
          В хроме и сафари все отлично работает.

          Ответить
  • Виталий:

    Спасибо, пригодилось.

    Ответить
  • waak:

    как сделать закрытие окна по клику на кнопку а не на область в не окна

    Ответить
  • Павел:

    Конструктор Date разве не должен быть со скобками?

    Ответить
  • Сергей:

    Здравствуйте. В статье вы говорите, что скрипт на одной странице появится только 1 раз. Подскажите, как вы это реализовали? Я сделал то же самое по вашей инструкции, но у меня скрипт срабатывает каждый раз, когда курсор выходит из области документа.

    Ответить
    • Alexander:

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

      Ответить
  • Александр:

    А как сделать такое,чтобы на мобильном работало? не нашёл решений

    Ответить
    • Alexander:

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

      Есть скрипты, которые предупреждают об уходе со страницы (переход по ссылке, закрытие окна или браузера). На мобильном не проверял правда их работу.
      Но там текст пишет сам браузер, например: Эта страница просит вас подтвердить, что вы хотите уйти — при этом введённые вами данные могут не сохраниться.
      Изменить там что то не получится,

      Ответить
  • Светлана:

    Я что то не пойму, а как работает крестик, который закрывает окно?

    Ответить
    • Alexander:

      Он никак не работает 🙂 Для красоты просто 🙂
      А закрытие окна происходит при клике вне окна.

      Ответить