Всплывающее окно с формой подписки на jQuery

Всплывающее окно с формой подписки на jQuery

Сбор подписной базы чрезвычайно важен. Что же это такое? Идея сбора подписной базы состоит в том, чтобы люди, посещающие Ваш сайт, оставили свои координаты. Наиболее распространенным типом контактной информации собираемой для контактной базы, является электронная почта. Один из популярных методов сбора email-ов пользователей — окно подписки на обновления содержимого сайта. Чаще всего оно делается в виде всплывающего (модального) окна.

Демо Скачать

Создаем всплывающее окно подписки

HTML

Проверим, подключена ли jQuery и, если нет, подключим её вместе с плагином jQuery.subscribe-better.js и соответствующим .css файлом:

Сделаем макет нашей страницы:

Содержимое блочного элемента <div>, принадлежащего классу subscribe-me и будет содержимым нашего окна.

jQuery

Осталось только вызвать функцию, отрисовывающую наше окно.

Мы намеренно старались создать максимально простые окна, однако при желании можно настроить свойства всплывающего окна как вы хотите. Наиболее важные свойства:

  1. trigger — значения этого свойства определяют когда пользователь увидит наше окно. «atendpage» (оно же значение по умолчанию) — при таком значении окно появится при достижении конца страницы пользователем. Если присвоить значение «onload» — пользователь увидит окно во время загрузки, а если «onidle» — в момент прокрутки страницы.
  2. animation — изначально имеет значение «fade». Другие возможные варианты — «flyInLeft», «flyInRight», «flyInUp» и «flyInDown».
  3. delay — параметр, задающий задержку вызова функции появления окна. Изначально равно 0 мс.
  4. showOnce — Изначально имеет значение true. Если имеет значение false — всплывающее окно будет появляться несколько раз, в зависимости от значения свойства trigger.
  5. autoClose — при значении true окно будет закрываться в автоматическом режиме при дальнейшем скроле страницы.
  6. scrollableModal — свойство, задающее полосу прокрутки в модальном окне. Может иметь значения true/false.

При использовании модальных окон главное помнить, что они раздражают многих пользователей и не использовать их чересчур часто.


Оставить комментарий