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

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

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

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

Поэкспериментировать вживую можете на тестовом блоге. В 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.