Лого www.SiteHere.ru

Всплывающее окно подписки — создание всплывающее окно на сайте

Настраиваемое всплывающее окно подписки

Каждый владелец сайта тем или иным способом собирает свою подписную базу. Ведь именно подписная база, как говорят многие инфобизнесмены, является золотым активом. Суть сбора подписной базы заключается в том, чтобы посетитель оставил вам свои контактные данные. Чаще всего это является адрес электронной почты. Сегодня мы рассмотрим всплывающее окно подписки на обновления сайта. Это окно будет появляться при прокрутке страницы. Возможно вы видели такие модальные окна, но не знали как реализовать у себя на сайте — тогда этот урок для вас.

Сразу посмотрите пример всплывающего окна подписки и обратите внимание когда оно появляется:

Посмотреть примерСкачать

PDF отчет

Как пользоваться? — Всплывающее окно подписки на обновления

HTML часть

Скачиваем библиотеку jQuery(здесь) и плагин jQuery.subscribe-better.js(здесь либо берем из примера) со стилями subscribe-better.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" />

Создадим HTML структуру:

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». Здесь каждый параметр вы можете посмотреть самостоятельно, прописывая каждое из значений для свойства animation. По умолчанию значение задано «fade».
  • delay — отвечает за задержку перед появлением всплывающего окна. Задается в миллисекундах, то есть 3000 мс — это 3 секунды. По умолчанию равно «0».
  • showOnce — если установить это свойство в значение в «false», то окно будет появляться каждый раз когда выполняется условие (например, каждый раз когда прокрутка страницы будет достигать конца). Если вы действительно любите своих посетителей, тогда оставьте это значение в «true». По умолчанию оно задано в значение «true».
  • autoClose — если хотите чтобы окно автоматически закрывалось когда пользователь продолжает прокручивать страницу, тогда установите значение для этого свойства «true». Изначально стоит значение «false».
  • scrollableModal — если у вас много информации в модальном окне и она не помещается, тогда вы можете сделать всплывающее окно с прокруткой, для этого значение этого свойства должно быть «true». По умолчанию для этого свойства задано значение «false».

Вывод

Что касается меня, то я не очень люблю всплывающие окна. Но многие инфобизнесмены их успешно используют, поэтому внимательно посмотрите в каких случаях у них появляются всплывающие окна. В противном случае можно отпугнуть посетителя и не увидеть его больше.

Желаю вам успехов в сборе своей подписной базы! А также хочу вам посоветовать больше экспериментировать, потому что именно тогда вы сможете найти тот способ, который начнет работать и приносить прибыль 😉 .

Успехов!

Источник: http://www.onextrapixel.com/2014/08/19/create-customizable-subscription-modalnewsletter-signup-window-with-jquery-subscribe-better-js/

Всплывающее окно подписки — создание всплывающее окно на сайте 5.00/5 (100.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
Комментарии (9) к записи
  • Артем

    Великолепная статья. Как и сам сайт.
    А может написать статью как использовать вспыхивающие окна с аякс запросом к базе в них?

     
    • Юрий

      Спасибо, Артем! Пока что нет раздела на сайте связанного с программированием.

       
  • Евгений

    Спасибо, наглядно, понятно, куча вариантов в демо. Сейчас попробую поставить

     
  • Егор

    Привет. Спасибо за окошечко ! Годится. Только сделаю резиновым с 600 до 300 примерно и поставлю на стр. портфолио контактную форму. Внизу пусть всплывает.

     
  • Владимир55

    В форме даже не упоминается обработчик! И нет сообщения "Отправлено" или "Не отправлено".

    А без всего этого какой от статьи толк?

     
    • Юрий Немец

      Вы не в силах сделать это самостоятельно? Тогда эта статья слишком сложная для Вас. Вам необходимо повторить основы.

       
  • Владимир55

    Просто выложенный Вами скрипт является полуфабрикатом. И я весьма сомневаюсь, что он вообще работоспособен.

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

     
    • Юрий Немец

      Но ведь он распространяется бесплатно. Привыкли на готовое "слетаться" 😉 . Если и это Вам не нравится, так может все-таки стоит подтянуть знания по JS?

       
  • Владимир55

    Привыкли на готовое "слетаться"

     

    А Вы привыкли публиковать всякий мусор, в котором сами не разбираетесь?

    И вместо того, чтобы поблагодарить за обратную связь, пытаетесь меня еще в чем-то упрекать. Сами подтяните свои знания по JS и тогда сможете говорить по существу.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *