Всплывающие модальные окна при выходе
В сегодняшнем уроке Вы узнаете как сделать красивое модальное окно, которое всплывает при попытке посетителя выйти.
Это довольно интересный пример. Суть заключается в том, что как только посетитель наводит мышку на верхний край сайта (то есть пересекает его в попытке нажать на крестик для закрытия окна) запускается скрипт и выводит окно на экран.
Все что от нас требуется - это прописать несколько строчек между тегами <head></head>:
<link type='text/css' href='basic.css' rel='stylesheet' media='screen' />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.simplemodal.js"></script>
<script type="text/javascript" src="init.js"></script>
Как Вы видите тут мы просто инициализируем jQuery и пару вспомогательных скриптов. Также подключаем таблицу стилей.
Далее где-нибудь в документе вставляем текст всплывающей подсказки:
<div style="display: none; padding: 10px;" id="exit_content">
<h1>Goodbye visitor!</h1><h3>Thanks for visiting us!</h3><br />
Some additional text here ... lorem ipsum.
</div>
Вот и вся технология! Суть данного метода заключается в том, что в файле init.js находится инструкция, которая вызывает всплывающее окно как только пользователь достигает последних 5 пикселей сайта. Значение "5" можно заменить на любое произвольное.
На сегодня все! Всем хорошего вечера!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.bitrepository.com
Перевел: Максим Шкурупий
Урок создан: 11 Мая 2009
Просмотров: 105048
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.