Всплывающее при закрытии страницы окно - Exit Box

page.png
Довольно часто встречаю на вордпрессных сеошных блогах такую штуку: когда посетитель покидает страницу, вылетает окно с како-нибудь фигнёй: "не забудь подписаться или приобрести очердной видеоурок со скидкой".

Нечто подобое можно сделать на любом блоге с помощью плагина модальных окон.
А в этом примере мы рассмотрим изобретение с названием Exit Modal Box.

Демо:
Окно с подпиской, рекламой или каким-либо ещё содержанием (любой html код) появляется в тот момент, когда посетитель подводит курсор мыши к заголовку вкладки браузера:

окно exit box jquery subscribe

Поэкспериментировать вживую можете на тестовом блоге. В Opera и Firefox изобретение работает вполне сносно. Конечно надо было посерьёзнее сделать демо, но мне, честно говоря, было лень =).

Установка.
1) В блоге должна присутствовать подключенная библиотека jQuery.

2) В оргинале Exit Box работает на двух скриптах: jquery.simplemodal.js и init.js.
Чтобы не замусоривать шаблон лишними ссылками, я объединил их в один файл exit.js, который вы можете скачать и переложить на собственный хостинг.
С файлом стилей basic.css нобходимо поступить таким же образом.
После чего в шаблон перед тегом </head> вставляете ссылки на захостенные (у себя) скрипт и стили:
<script type="text/javascript" src="exit.js"></script>
<link type='text/css' href='basic.css' rel='stylesheet' media='screen' />
Тонкости:
  • Чтобы изменить внешний вид всплывающего окна, отредактируйте basic.css (например, добавить фон, тени и т.п.)
  • В начале файла exit.js в e.pageY < = 5 прописаны для проверки нахождения курсора мыши первые 5 пикселей. Параметр можно изменить.
  • Содержимое css файла можно скопировать в шаблон Blogger, тогда ссылку на этот файл подключать не придётся

3) В html виджет/гаджет Blogger или в шаблон перед тегом </body> вставляете слеующий html блок:
<div style="display: none; padding: 20px;" id="exit_content">
содержимое всплывающего окна
</div>
Тонкости:
  • Параметр padding 20 - отступ от края для элементов внутри окна (текст, картинки)
  • "Cодержимое всплывающего окна" - текст, картинки и что угодно (см. скриншот выше), что будет отображаться посетителю (сделать это можно в редакторе сообщений Blogger, затем получившийся html код скопировать внутрь этого контейнера)

По мотивам статьи Exit Modal Box.

37 комментариев:

  1. По мне, то ничего кроме раздражения, эти назойливые плакатики не дают. Более на сайт\блог с подобными финтифлюшками стараюсь не заходить. ИМХО - естественно.

    ОтветитьУдалить
  2. Да.Это точно.Одно раздражения.

    ОтветитьУдалить
  3. Солидарен. Но в некоторых случая может быть полезным даже для нормального блога.
    Представьте, что вы хотите помочь в акции по сбору средств на лечение больному ребёнку.
    Поэтому ставите такой скрипт, но не на весь блог, а на популярную страницу. Что плохого?

    ОтветитьУдалить
  4. Хуйня, одним словом! Не буду я читать о сборе средств для больного ребенка, если эта информация закрывает основной текст! Важное не должно прыгать, лишь незрелые школьники считают: всплывающее окно - это круто...

    ОтветитьУдалить
  5. По-моему, за такие всплывающие окна убивать надо :) Хотя, впрочем, у меня они все равно блокируются с помощбю AdBlock...

    ОтветитьУдалить
  6. Да сеошников вообще убивать надо! Засрали рунет, из-за них ввели такую гадость, как nofollow, сделали культ из тИЦ, а из творчества бизнес.

    ОтветитьУдалить
  7. @aldous
    Новый год кончился.А про деда мороза на облаке забыл наверное?

    ОтветитьУдалить
  8. Нет, не забыл). Сниму после того, как ёлку дома разберу, это наверное будет в марте...=)

    ОтветитьУдалить
  9. @aldous
    Да оставляй на следующий новый год.

    ОтветитьУдалить
  10. Не, надо будет что-нить другое придумать к весне. Может соловья или мартовского кота ...

    ОтветитьУдалить
  11. А как всплывающее окно сделать при заходе на страницу, но чтобы оно всплывало спустя несколько минут?

    ОтветитьУдалить
  12. Как здесь.
    Где-то есть ещё один радикальный способ (сам изобрёл когда-то) делать задержки на скрипты, но что-то не найду.
    В блоге черт голову сломит, ищу через поисковик=), надо что-то с навигацией придумывать.

    ОтветитьУдалить
  13. Думаю сойдёт. А то вопрос от читателей пришел, а разбираться самой сейчас не хочется.

    ОтветитьУдалить
  14. @Palych
    У меня на вордпрессе че то не работает cutw.ru

    ОтветитьУдалить
  15. Здравствуй aldous, установил у себя, большое спасибо! Только ни как не могу сделать так, что бы функционировало после прокрутки вниз. В сети тоже не нашел решение. Вся надежда на тебя!

    ОтветитьУдалить
  16. Не, не, не, убирай этот скрипт нафиг! Он не для обычных блогов, это вредная штука.

    ОтветитьУдалить
  17. А если абстрагироваться от моего блога, что можно сделать (чисто теоретически) по моему вопросу? Хотя бы направление мысли?

    ОтветитьУдалить
  18. А фиг его знает, в фаерфокс 12 при малейшем скроле тут же перестаёт работать, игры с цифрами в скрипте бессмысленны, поскольку pageY увеличивать сильно нельзя, окно вылетает всё время. Демка разработчика, если её сохранить и увеличить длину страницы, так же себя ведёт. Надо писать хозяину -).

    ОтветитьУдалить
  19. а можно сделать так, чтобы сообщение показывалось только тем пользователям, кто провел на ней меньше какого-то времени?

    ОтветитьУдалить
  20. А реально сделать при закрытие всплывающее окно где можно спросить почему уходят и что не понравилось?сделать несколько вариантов ответа и получать отчет.Эт я про joomla 2.5

    ОтветитьУдалить
  21. Конечно реально. Думаю, в joomla есть похожее окно на php, куда можно вставить форму опроса и отправки сообщения администратору.
    Но я далёк от joomla, несколько лет не ковырял этот движок, поэтому рецепта дать не могу, но можете заказать это у фрилансеров.

    ОтветитьУдалить
  22. Анонимный5 мая 2013 г., 22:24

    Как я понял, скрипт срабатывает, если пользователь выводит курсор, когда страница не прокручивалась ниже. А если страница большая и пользователь прокрутил её ниже, то скрипт не сработает. Как в таком случае быть?

    ОтветитьУдалить
    Ответы
    1. >Как в таком случае быть?
      Обратиться к разработчику :-).

      Удалить
  23. Анонимный5 мая 2013 г., 22:54

    Сам нашёл решение: нужно заменить в скрипте событие .mousemove на .mouseleave и убрать проверку координаты Y

    ОтветитьУдалить
    Ответы
    1. Анонимный5 мая 2013 г., 23:26

      Предыдущее решение оказалось не самым удачным: окно всплывало даже тогда, когда я хотел воспользоваться вертикальным/горизонтальным скроллбаром )) Нашёл альтернативу: в самом начальном варианте нужно поменять posY на clientY. Тогда всё работает красиво

      Удалить
    2. Спасибо, Работает!

      Удалить
  24. Спасибо за информацию. Однако этот скрипт юзайте осторожно, не любит Яндекс такие вещи, можно АГС схватить.

    ОтветитьУдалить
  25. ничего не понятно, как это сделать то? а если у меня одностраничник?

    ОтветитьУдалить
    Ответы
    1. у меня тоже одностраничник http://dm.101kursovik.ru
      поставилось легко и даже не спросило, что не так.

      Удалить
  26. И спасибо автору за такую простую штуку.

    ОтветитьУдалить
  27. А как сделать так, чтоб это окно всплывало всего 1 раз, а не постоянно.

    ОтветитьУдалить
    Ответы
    1. (function($) {
      $(function() {

      // Проверим, есть ли запись в куках о посещении посетителя
      // Если запись есть - ничего не делаем
      if (!$.cookie('was')) {

      $(document).mouseleave(function(e) {

      if(e.clientY <= 5)
      {

      // Launch MODAL BOX
      $('#myModal').modal({onOpen: modalOpen, onClose: simplemodal_close});
      }

      });

      }

      // Запомним в куках, что посетитель к нам уже заходил
      $.cookie('was', true, {
      expires: 365,
      path: '/'
      });

      })
      })(jQuery)

      Удалить
  28. Куда этот код нужно вставить?

    ОтветитьУдалить
  29. Файлы exit.js и basic.css не загружаются. Поправьте, пожалуйста.

    ОтветитьУдалить
  30. Этот комментарий был удален автором.

    ОтветитьУдалить
  31. как бысьтро летит время - сайт planeta.omg-linux.ru приказал долго жить.
    Хотя польза от этой заметки есть - ссылка на англоязычный первоисточник :)

    ОтветитьУдалить