От автора: хорошая база подписчиков является залогом успеха каждого инфобизнесмена. Но как же привлечь внимание посетителей и тем более сделать так, чтобы они подписывались на Вашу рассылку. Конечно, для этого необходимо создать очень интересный и качественный информационный продукт, а также расположить в удобном, а главное, видном месте форму подписки. Поэтому в данном уроке мы с Вами научимся создавать всплывающую форму подписки, которая будет появляться на сайте, спустя некоторое время после входа, и располагаться строго по центру над всем контентом. Тем самым Ваше уникальное предложение сразу будет перед глазами у пользователя.
1. Подготовка к уроку
Итак, давайте определимся, что нам потребуется для урока. Первым делом необходим любой тестовый сайт, или простая html страничка для тестирования всплывающего окна формы подписки. У меня для этих целей есть небольшой сайтик, который выводит набор статей хранящихся в базе данных – его мы и используем. Исходные файлы данного сайта, я приведу в исходных материалах к уроку. Вот его вид в браузере:
Второе, что нам потребуется – это библиотека jQuery. Напомню для тех кто может подзабыл, что jQuery – это специальная библиотека, написанная на языке javaScript, которая содержит набор различных методов по выборке и манипуляции элементами страницы Вашего сайта.
Данную библиотеку нам необходимо скачать и подключить к сайту. Поэтому давайте перейдем на официальный сайт библиотеки: //jquery.com. А затем нажмем по кнопке Download jQuery и сохраняем в папке js в корне тестового сайта (тестовый сайт сохранен на локальном компьютере в папке lessons/forma_p). Теперь откроем индексный файл (index.php) и подключим скачанную библиотеку jQuery.
|
1 |
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> |
Теперь давайте скачаем плагин для библиотеки jQuery, который позволит нам легко работать с куками, название данного плагина — jquery.cookie. Плагины — это дополнительные библиотеки, которые расширяют функционал библиотеки jQuery.
Зачем нам нужны куки? Смотрите, когда пользователь откроет страницу сайта с формой подписки в первый раз, то данная форма будет отображена на сайте. Если же закрыть или подтвердить подписку, то при следующих визитах на данный сайт, уже не зачем ее показывать. Поэтому что бы знать просматривал ли пользователь окошко с формой подписки или нет, необходимо сохранить в куках информацию о просмотрах данной формы.
Поэтому давайте скачаем данный плагин, для этого давайте перейдем на сайт //plugins.jquery.com/cookie/ и перейдем по ссылке Download now . Сразу же начинается скачивание данного плагина. Аналогично сохраняем в папке js/
А затем в индексном файле подключим плагин к нашему сайту (после подключения библиотеки jQuery):
|
1 |
<script type="text/javascript" src="js/jquery.cookie.js"></script> |
И последнее – давайте создадим пустой файл script.js, в котором мы будем вести кодирование на языке javascript, сохраним его в папке js и точно также подключим к нашему сайту:
|
1 |
<script type="text/javascript" src="js/script.js"></script> |
2. Создание формы подписки
Теперь давайте создадим саму форму подписки. Для этого в индексный файл добавим следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="popup_body"> </div> <div class="popup"> <div class="popup_close"> X </div> <div class="popup_form"> <form action="" method="POST"> <input class="popup_inp" type="text" value="Ваше имя"> <br /> <input class="popup_inp" type="text" value="Почта"> <br /> <input class="popup_submit" type="submit" value="OK"> </form> </div> </div> |
Как Вы видите здесь все просто, вначале создаем общий контейнер с классом popup, в котором будет располагаться вся форма подписки. Затем внутри данного блока, создаем блок, с классом popup_close – данный блок будет играть роль кнопочки закрытия окна. И следующий блок с классом popup_form – для хранения текстовой формы. Текстовая форма может содержать различные поля, для примера, я добавил два текстовых поля – поле ввода имени пользователя и поле ввода его почтового адреса.
Блок с классом popup_body необходим для затемнения всего контента, когда отображается всплывающая форма подписки. Теперь давайте откроем браузер и посмотрим, что у нас получилось:
Далее давайте зададим несколько стилей для данной формы, для этого откроем файл стилей style.css и добавим следующий код (для фона блока с формой подписки, я использую изображение popup_bg.png, которое будет у Вас в исходниках к уроку):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.popup { width:650px; height:200px; position: fixed; z-index:100; border:1px solid #074776; padding:10px; background-image:url(../file/popup_bg.png); background-position:left top; background-repeat: no-repeat; background-color:#F6F6F6; border-radius:10px; } .popup_form { float: right; margin-right:10px; margin-top:20px; } .popup_inp { height:30px; border-radius:10px; background-color:#F1F1F1; border:2px solid #074776; text-align: center; margin:10px; } .popup_submit { height:30px; width:70px; border-radius:10px; background-color:#b1b1b1; border:2px solid #074776; text-align: center; margin:10px; margin-left:45px; } .popup_close { float: right; border-radius:10px; border:1px solid red; width:30px; height:30px; text-align: center; padding-top:5px; cursor: pointer; } .popup_body { opacity:0.8; background-color:#074776; position:fixed; width:100%; height:100%; z-index:50; } |
Давайте теперь откроем браузер и посмотрим как изменилась форма подписки:
Вот таким образом будет выглядеть форма подписки, обратите внимание, если отображена форма, то весь контент будет затемнен, что собственно у нас и получилось. Теперь необходимо позиционировать данную форму строго по центру и создать логику плавного появления и исчезания данной формы.
3. Логика работы всплывающего окна
Теперь давайте откроем файл script.js и добавим следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
jQuery(document).ready(function() { //скрываем элементы $(".popup").hide(); $(".popup_body").hide(); //функция показа формы подписки function show_popup() { var date = new Date(); var time_n = date.getTime(); var time_c = $.cookie(“popup”); if(time_c == null || time_c < (time_n – 30 * 24 * 60 * 60 * 1000)) { var popup_w = $(“.popup”).width(); var popup_h = $(“.popup”).height(); var window_w = $(window).width(); var window_h = $(window).height(); var margin_l = parseInt((window_w/2) – (popup_w/2)); var margin_t = parseInt((window_h/2) – (popup_h/2)); $(“.popup_body”).fadeIn(100,function () { $(“.popup”). css({‘margin-left’:margin_l,’margin-top’:margin_t}). fadeIn(500); }); } } setTimeout(show_popup,3000) }); |
Давайте по порядку:
Первым делом скрываем блоки с классами popup и popup_body, используя метод hide(). Напомню, что метод hide(), применяется для плавного скрытия выбранных элементов, время длительности анимации передается параметром данному методу. Если же ничего не передавать, то выбранный элемент будет скрыт мгновенно.
Далее создаем функцию show_popup(), которая и будет показывать на экран форму подписки. В теле данной функции, первым делом, создаем переменную time_n, в которую записываем текущее время, в формате – количества миллисекунд прошедших с 1 января 1970 года.
Смотрите, после закрытия или отправки формы подписки мы будем записывать в куки текущее время – то есть когда именно была закрыта или отправлена форма (в том же формате – описанном выше).
И если, к примеру, пользователь уже просматривал форму подписки, то предлагаю реализовать возможность показа данной формы через определенное количество времени, к примеру, через 30 дней. Вот для этой цели нам и нужна переменная time_n, используя которую, мы можем проверить сколько времени прошло после последнего просмотра формы подписки.
Далее создаем переменную time_c и записываем в нее время, сохраненное в куках. Для этого используем метод cookie(). Данный метод входит в состав плагина jquery.cookie, и выполняет считывание, либо запись файлов куки. Если передать только имя куки (что сделано в данном случае), то будет выполнено чтение данных, записанных в куки с именем, что мы передали параметром.
Теперь формируем условие – если в куках ничего не записано или форма подписки просматривалась больше чем 30 дней назад, значит необходимо показать форму подписки.
Далее определяем ширину и высоту блока с формой подписки (блок с классом popup), для этого создаем переменные popup_w и popup_h – соответственно. Используем для этого методы width() – для получения ширины, и метод height() – для получения высоты выбранного блока.
Далее аналогично определяем ширину и высоту окна браузера пользователя и сохраняем в переменные window_w и window_h соответственно, используя все те же методы width() и height().
Значения параметров блока с формой подписки и окна браузера, нам необходимы, что бы точно позиционировать блок с формой подписки по центру экрана.
Позиционирование мы будем выполнять, задавая, левый и верхний отступ для блока с формой. Для этого создадим две переменные: margin_l – для левого внешнего отступа и margin_t – для верхнего внешнего отступа.
Теперь давайте поясню, как рассчитать левый внешний отступ. Вначале находим расстояние к центру экрана пользователя по ширине:
|
1 |
window_w/2 |
Затем расстояние к центру блока с формой подписки по ширине:
|
1 |
popup_w/2 |
Теперь зная две эти величины мы можем получить значение левого отступа, который необходимо задать блоку с формой подписке, для того что бы расположить его строго по центру окна браузера:
|
1 |
(window_w/2) - (popup_w/2) |
При этом приведем величину к целочисленному типу данных (отбросим дробную часть), используя функцию parseInt().
Далее выбираем при помощи jQuery блок с классом popup_body (блок который используется для затемнения контента) и плавно показываем его, используя метод fadeIn(). Первым параметром передаем длительность анимации – то есть скорость появления данного блока. Вторым параметром описываем функцию, которая выполнится после завершения анимационных эффектов метода fadeIn (то есть когда выбранный блок полностью покажется). Внутри данной функции выбираем (при помощи библиотеки jQuery) блок с классом popup и задаем ему внешние левый и верхний отступы – те, что мы с Вами рассчитали. Для этого используем метод css() – который, применяется для задания правил css к выбранным элементам. Обратите внимание на синтаксис параметров данного метода (в фигурных скобках указываем вначале правило, затем двоеточие и затем уже значение данного параметра).
Далее, используя метод fadeIn(500), плавно показываем выбранный блок (блок с формой) со скоростью 500 миллисекунд.
Теперь осталось только вызвать данную функцию на исполнение. Я предлагаю показывать блок с формой не сразу, а, к примеру через 3 секунды после отображения сайта на экране. Поэтому для вызова функции show_popup, используем функцию setTimeout, которая вызовет данную функцию на исполнение через 3000 миллисекунд (3 секунды), что нам и нужно.
Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:
Как Вы видите, все отлично отрабатывает – форма плавно появляется через 3 секунды после загрузки страницы с затемнением контента и при этом располагается строго по центру.
4. Закрытие формы подписки
Теперь осталось реализовать логику закрытия данной формы, для этого в файл script.js добавим следующий код:
|
1 2 3 4 5 6 7 8 9 10 |
$(".popup_close").click(function() { $(".popup").fadeOut(300, function() { $(".popup_body").fadeOut(100); var date = new Date(); var time_n = date.getTime(); $.cookie("popup",time_n); }); }); |
Смотрите, при помощи jQuery выбираем блок, с классом popup_close (напомню, что данный блок играет роль кнопки закрытия окна) и вызываем обработчик события click(). Данный обработчик сработает, когда по выбранному блоку нажать левой кнопкой мыши. То есть другими словами, при клике по выбранному блоку, выполнится функция описанная в обработчике события click. В данной функции выбираем при помощи jQuery блок с классом popup, то есть форму подписки, и скрываем, используя метод fadeOut(). Скорость исчезания блока задаем 300 миллисекунд, затем описываем функцию, которая выполнится после полного исчезания данного блока. В этой функции просто скрываем блок, который затеняет весь контент сайта — блок с классом popup_body. То есть идея заключается в том, что бы скрыть в начале блок с формой, а затем блок который затеняет весь контент.
И в конце необходимо в куки записать текущую метку времени — то есть время когда была закрыта форма подписки. Для этого получаем текущее время, в формате — количество миллисекунд прошедших с 1 января 1970 года и записываем его в переменную time_n. Далее используя метод cookie(), записываем в куки с именем popup, значение хранящиеся в переменной time_n (то есть текущее время). Аналогичные действия можно проделать и для кнопки отправки формы, то есть после отправки формы Вы так же скрываете данную форму и записываете в куки текущую метку времени.
Вот и все теперь, давайте перейдем в браузер и посмотрим что получилось. Как Вы видите все отлично отрабатывает, форма подписки как показывается так и скрывается по нажатию на кнопку Закрыть.
А на этом будем прощаться. Всего Вам доброго и до новых встреч!!!
Комментарии (21)