1 197 Сбор подписной базы чрезвычайно важен. Что же это такое? Идея сбора подписной базы состоит в том, чтобы люди, посещающие Ваш сайт, оставили свои координаты. Наиболее распространенным типом контактной информации собираемой для контактной базы, является электронная почта. Один из популярных методов сбора email-ов пользователей — окно подписки на обновления содержимого сайта. Чаще всего оно делается в виде всплывающего (модального) окна.
Создаем всплывающее окно подписки
HTML
Проверим, подключена ли jQuery и, если нет, подключим её вместе с плагином jQuery.subscribe-better.js и соответствующим .css файлом:
|
1 2 3 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.subscribe-better.js"></script> <link rel="stylesheet" type="text/css" href="css/subscribe-better.css" /> |
Сделаем макет нашей страницы:
|
1 2 3 4 5 6 7 8 |
<body> .. <div class="subscribe-me"> <a href="#close" class="sb-close-btn">x</a> ... </div> .. </body> |
Содержимое блочного элемента <div>, принадлежащего классу subscribe-me и будет содержимым нашего окна.
jQuery
Осталось только вызвать функцию, отрисовывающую наше окно.
|
1 2 3 4 5 6 7 8 |
$(".subscribe-me").subscribeBetter({ trigger: "atendpage", animation: "fade", delay: 0, showOnce: true, autoClose: false, scrollableModal: false }); |
Мы намеренно старались создать максимально простые окна, однако при желании можно настроить свойства всплывающего окна как вы хотите. Наиболее важные свойства:
- trigger — значения этого свойства определяют когда пользователь увидит наше окно. «atendpage» (оно же значение по умолчанию) — при таком значении окно появится при достижении конца страницы пользователем. Если присвоить значение «onload» — пользователь увидит окно во время загрузки, а если «onidle» — в момент прокрутки страницы.
- animation — изначально имеет значение «fade». Другие возможные варианты — «flyInLeft», «flyInRight», «flyInUp» и «flyInDown».
- delay — параметр, задающий задержку вызова функции появления окна. Изначально равно 0 мс.
- showOnce — Изначально имеет значение true. Если имеет значение false — всплывающее окно будет появляться несколько раз, в зависимости от значения свойства trigger.
- autoClose — при значении true окно будет закрываться в автоматическом режиме при дальнейшем скроле страницы.
- scrollableModal — свойство, задающее полосу прокрутки в модальном окне. Может иметь значения true/false.
При использовании модальных окон главное помнить, что они раздражают многих пользователей и не использовать их чересчур часто.
