Всплывающее модальное окно с формой подписки (страница 1)

Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров.

У меня есть урок о создании всплывающего модального окна с формой подписки, которое появляется в центре экрана. Сейчас мы рассмотрим вопрос создания похожего окна, которое может, в зависимости от настроек, появляться как в центре экрана, так и всплывать при попытке посетителя уйти с вашей страницы либо перезагрузить её. Этот вариант окна более продвинутый и может, в какой-то степени, оказывать влияние на поведение потенциальных покупателей вашего продающего сайта, обративших внимание на какие-либо предложения. Ещё одна серьёзная задача этого скрипта - способствовать расширению подписной базы. В любом случае - это полезный инструмент для онлайн-бизнеса. На моей странице скрипт настроен таким образом, что окно появляется, когда посетитель сайта пытается покинуть страницу, перемещая курсор мыши в сторону закрытия окна браузера. Это Вы можете легко проверить, пытаясь закрыть эту страницу. Следует отметить гибкость настроек скрипта. Используя файл «modal.js», можно задавать многие параметры и режимы работы, а в папке «templates» Вы найдёте семь скинов, которые разнообразят цветовую гамму окна и дают возможность подобрать цвет, соответствующий цветовой схеме шаблона вашего сайта. Скрипт прост в установке и идеально подходит для самописного сайта, а также легко встраивается в структуру сайтов на движках Wordpress, Joomla и др.

Примечание: скрипт предоставляется в кодировке utf-8. Если ваш сайт в другой кодировке (например, windows-1251), то необходимо либо перекодировать скрипт, либо воспользоваться файлом .htaccess.

Установка на сайт

Установка, как я уже говорил, проста. Я постараюсь объяснить пошагово, так, чтобы было понятно даже не совсем посвящённым, начинающим web-мастерам.

Шаг 1

Скачать архив splash_wind.rar (221 кб), распаковать в текущую папку на компьютере и папку splash_wind целиком закачать в корневую папку сайта.

Шаг 2

Далее, на HTML-странице, которую Вы подготовили для размещения скрипта, нужно подключить стили и необходимые ява-скрипты. Для этого, код (без изменений!), который находится в таблице ниже, нужно скопировать и вставить, желательно в разделе head вашего сайта, где обычно скрипты и стили подключаются:

<script type="text/javascript" src="splash_wind/jquery-1.4.4.js"></script>
<script type="text/javascript" src="splash_wind/jquery.cookie.js"></script>	
<script type="text/javascript" src="splash_wind/s_dialog/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>	
<script type="text/javascript" src="splash_wind/s_dialog/fancybox/jquery.fancybox-1.3.4.pack.js"></script>	
<script type="text/javascript" src="splash_wind/s_dialog/modal.js"></script>
<link rel="stylesheet" type="text/css" href="splash_wind/s_dialog/fancybox/jquery.fancybox-1.3.4.css">
<link rel="stylesheet" type="text/css" href="splash_wind/s_dialog/fancybox/jquery.fancybox-1.3.4.css">	

Больше ничего на странице размещать не будем. В дальнейшем, ознакомимся с возможными настройками, редактирование которых происходит в файле modal.js в папке s_dialog. Открываем файл modal.js:

        

//настройки диалогового окна

//время в секундах когда окно откроется после отображения страницы
modal_wnd_time = 2;

//режим отображения окна 1- после закрытия, 0-по времени
modal_wnd_mode = 1;

//количество раз сколько окно будет открываться у пользователя в браузере при открытии страниц сайта где установлен модуль (0 - постоянно будет открываться)
modal_wnd_count = 2;

//ширина и высота указанного вами диалогового окна в пикселях
modal_wnd_wclassth = 733;
modal_wnd_height = 373;


//путь к окну которое нужно будет показать (в каталог можно добавить разные виды окон в виде html файлов)
//(неправильное указание этого пути приведет к отображению пустого окна)
modal_wnd_path = 'splash_wind/s_dialog/templates/blue/index.html';

//цвет затеняющего окна
modal_wnd_color = '#000';

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

          Значение 2 здесь говорит о том, что в случае, если выставлен режим отображения окна «по времени» (т.е., не единичка, как в нашем случае, а - ноль), то окно откроется в центре экрана ровно через две секунды после загрузки страницы.

          Как говорилось ранее, окно может появляться в одном из двух возможных вариантов: при попытке закрытия страницы и просто через установленное время. В нашем случае значение параметра «modal_wnd_mode = 1;» говорит о том, что окно будет появляться при приближении указателя мышки к кнопке закрытия окна. В этом варианте, параметр «modal_wnd_time» ни на что влиять не может, независимо от значения, которое там выставлено.

          Значение параметра modal_wnd_count = 2; говорит о том, что модальное окно будет открываться только два раза при перезагрузке страницы; в дальнейшем же, чтобы не отвлекать посетителей сайта, его не будет, пока Вы не почистите cookies (проще говоря, - куки) в браузере или не перезапустите его.

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

          В комплекте скрипта есть семь скинов различной цветовой гаммы. В папке «templates» находятся семь папок (по названию цветов), имена которых нужно подставлять в значение параметра «modal_wnd_path». В нашем случае это «blue» (голубой). У Вас есть прекрасная возможность подобрать цвет модального окна, чтобы он максимально соответствовал цветовому решению вашего сайта.

          И, наконец, цвет затеняющего окна. В данном случае - это тень чёрного цвета (#000) и, по-моему, этот цвет универсальный и как можно лучше подходит для такого рода эффектов. Но, естественно, Вы легко можете сменить его на другой, который Вам понравится в этом качестве.

Далее в файле modal.js ничего изменять не рекомендуется.