Всплывающее при закрытии страницы окно - 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> вставляете ссылки на захостенные (у себя) скрипт и стили:

Тонкости:

  • Чтобы изменить внешний вид всплывающего окна, отредактируйте basic.css (например, добавить фон, тени и т.п.)
  • В начале файла exit.js в e.pageY < = 5 прописаны для проверки нахождения курсора мыши первые 5 пикселей. Параметр можно изменить.
  • Содержимое css файла можно скопировать в шаблон Blogger, тогда ссылку на этот файл подключать не придётся

3) В html виджет/гаджет Blogger или в шаблон перед тегом </body> вставляете слеующий html блок:

Тонкости:

  • Параметр padding 20 - отступ от края для элементов внутри окна (текст, картинки)
  • "Cодержимое всплывающего окна" - текст, картинки и что угодно (см. скриншот выше), что будет отображаться посетителю (сделать это можно в редакторе сообщений Blogger, затем получившийся html код скопировать внутрь этого контейнера)

Источник: blogger.omg-linux.ru

Категория: Безопасность

Похожие статьи: