Февраль 10, 2015 Запись была обновлена
Всплывающее окно подписки — создание всплывающее окно на сайте
Каждый владелец сайта тем или иным способом собирает свою подписную базу. Ведь именно подписная база, как говорят многие инфобизнесмены, является золотым активом. Суть сбора подписной базы заключается в том, чтобы посетитель оставил вам свои контактные данные. Чаще всего это является адрес электронной почты. Сегодня мы рассмотрим всплывающее окно подписки на обновления сайта. Это окно будет появляться при прокрутке страницы. Возможно вы видели такие модальные окна, но не знали как реализовать у себя на сайте — тогда этот урок для вас.
Сразу посмотрите пример всплывающего окна подписки и обратите внимание когда оно появляется:
Посмотреть примерСкачать
Как пользоваться? — Всплывающее окно подписки на обновления
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».
Вывод
Что касается меня, то я не очень люблю всплывающие окна. Но многие инфобизнесмены их успешно используют, поэтому внимательно посмотрите в каких случаях у них появляются всплывающие окна. В противном случае можно отпугнуть посетителя и не увидеть его больше.
Желаю вам успехов в сборе своей подписной базы! А также хочу вам посоветовать больше экспериментировать, потому что именно тогда вы сможете найти тот способ, который начнет работать и приносить прибыль 😉 .
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Великолепная статья. Как и сам сайт.
А может написать статью как использовать вспыхивающие окна с аякс запросом к базе в них?
Спасибо, Артем! Пока что нет раздела на сайте связанного с программированием.
Спасибо, наглядно, понятно, куча вариантов в демо. Сейчас попробую поставить
Привет. Спасибо за окошечко ! Годится. Только сделаю резиновым с 600 до 300 примерно и поставлю на стр. портфолио контактную форму. Внизу пусть всплывает.
В форме даже не упоминается обработчик! И нет сообщения "Отправлено" или "Не отправлено".
А без всего этого какой от статьи толк?
Вы не в силах сделать это самостоятельно? Тогда эта статья слишком сложная для Вас. Вам необходимо повторить основы.
Просто выложенный Вами скрипт является полуфабрикатом. И я весьма сомневаюсь, что он вообще работоспособен.
Во всяком случае, на трех форумах программистов, куда я обратился за помощью, почти сто человек тему просмотрели, и ни один не предложил код, который бы заработал.
Но ведь он распространяется бесплатно. Привыкли на готовое "слетаться" 😉 . Если и это Вам не нравится, так может все-таки стоит подтянуть знания по JS?
Привыкли на готовое "слетаться"
А Вы привыкли публиковать всякий мусор, в котором сами не разбираетесь?
И вместо того, чтобы поблагодарить за обратную связь, пытаетесь меня еще в чем-то упрекать. Сами подтяните свои знания по JS и тогда сможете говорить по существу.