Всплывающее окно

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



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

Оглавление:

Преимущество такого подхода:


  1. Эффект колоссальный.

  2. Жалоб от него, мало.

Всплывающее окно jQuery





Чтобы создать всплывающее окно, многие используют программы сторонних разработчиков, например, Opt-in Monster, LeadPages или Builder плагин от SumoMe. Эти приложения удобны, но зачем использовать программы сторонних разработчиков если у большинства CMS, jQuery есть по умолчанию.


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


Всплывающее окно


К началу

Подключить jQuery


Если CMS не содержит по умолчанию библиотеку jQuery, её можно скачать и подключить к сайту. Но проще добавить ссылку на библиотеку jQuery:


<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Далее к странице еще нужно подключить два плагина jQuery:


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


  • jquery.modal.min.js

  • jquery.modal.css

  • close.png

  • spinner.gif

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


Второй плагин который нужен это jQuery Cookie, мы применим его для пользователей которые на всплывающем окне нажали кнопку “закрыть”, и не видели всплывающее окно в течение одного месяца.


Это означает что:


  1. Все должны видеть всплывающее окно по крайней мере один раз.

  2. После возвращения на сайт посетители не видят всплывающее окно.

Для этого используется Cookie и он достаточно хорошо работает.


После подключения jQuery вместе с плагинами нужно создать файл HTML который выглядит так:


<head>
<title>Всплывающее окно с помощью jQuery</title>
<link rel="stylesheet" href="css/jquery.modal.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.modal.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
</head>
К началу

Создать всплывающее окно


Между тегами <body></body> вставляем веб-форму:


<div id="opn-win" style="display:none;">
<form>
<input type="email" placeholder="Ваш электронный адрес...">
<input type="submit" value="Бесплатный доступ к файлам!">
</form>
</div>

Это код всплывающего окна, окно появится после того как пользователь откроет сайт. Вид всплывающего окна не яркий, но это не имеет значения.


Стоит уточнить пару вещей:


  1. Всплывающее окно должно иметь уникальный ID. Для примера я использовал "opn-win".

  2. Свойство стиля установлено display="none", что бы всплывающее окно не отображалось в основном интерфейсе.

Прямо перед </body>, нужно добавить функцию которая будет выполняться один раз при открытии страницы сайта:


<script type="text/jаvascript">
$(window).load(function() {
// код который выполняться при загрузке страницы
}
</script>

Чтобы всплывающее окно появлялось при загрузке страницы нужно добавить функцию, которая предоставлена нам плагином jQuery:


<script type="text/jаvascript">
$(window).load(function() {
// вызвать модальное окно
$('#opn-win').modal();
});
</script>

Если сделано всё правильно, то после обновления страницы в браузере, должно появиться всплывающее окно как на снимке ниже:


Всплывающее окно при загрузке страницы с помощью плагина jQuery
Всплывающее окно при загрузке страницы

Если нужно, можно сделать так чтобы окно появлялось не сразу. Лучше когда есть небольшая задержка после открытия страницы сайта пользователем. Чтобы так сделать, нужно добавить метод setTimeout:


setTimeout(function() {
// этот код будет выполняться после 7 секунд
}, 7000);

Первый аргумент — это функция для всплывающего окна, второй параметр задержка (в миллисекундах).


Полностью функция будет выглядеть так:


$(window).load(function() {
// задержка 7 секунд
setTimeout(function(){
// вызвать модальное окно
$('#opn-win').modal();
}, 7000);
});
К началу

Добавление куки


Когда пользователь нажимает на всплывающем окне кнопку “закрыть”, сделаем так что бы всплывающее окно не появлялось снова один месяц. Это делает всплывающее окно не таким раздражающим. Для этого нужно выполнить функцию, после того как пользователь нажимает на кнопку “закрыть”. Кнопка “закрыть” ссылка на класс .close-modal, вот код этой кнопки:


$('.close-modal').click(function(){
console.log("Закрыть.");
});

Полностью функция:


$(window).load(function() {
// задержка 7 секунд
setTimeout(function(){
// вызвать модальное окно
$('#opt-in').modal();
}, 7000);
// если нажата кнопка "Закрыть"
$('.close-modal').click(function(){
console.log("Modal closed.");
});
});

Затем внутри этой новой функции, мы создадим cookie:


$('.close-modal').click(function(){
// создать cookie
$.cookie('hideTheModal', 'true');
});

cookie с именем hideTheModal имеет значение true. Также мы можем в параметре expires указать как долго должны хранится куки:


$('.close-modal').click(function(){
// добавить cookie
$.cookie('hideTheModal', 'true', { expires: 30 });
});

Если заменить значение параметра expires на 1 — всплывающее окно будет появлятся один раз в сутки, 7 — всплывающее окно один раз в неделю.


Напомню, что браузер Google Chrome не поддерживает cookies для локальных файлов. Это означает, что Вы должны будете проверить функциональность cookie на другом браузере.


Поэтому лучше добавить следующее условное:


var hideTheModal = $.cookie('hideTheModal');
if(hideTheModal == null){
// Окно появляется
} else {
// Окно не появляется
}

В контексте, код должен выглядеть так:


$(window).load(function() {
var hideTheModal = $.cookie('hideTheModal');
// если cookie не установлено появится окно
if(hideTheModal == null){
// задержка 7 секунд
setTimeout(function(){
// вызвать модальное окно
$('#opn-win').modal();
// если нажата кнопка "Закрыть"
$('.close-modal').click(function(){
// добавить cookie
$.cookie('hideTheModal', { expires: 30, path: '/' });
});
}, 7000);
}
});

Модальное окно jQuery 3…


$(window).on('load', function() {
var hideTheModal = $.cookie('hideTheModal');
// если cookie не установлено...
if(hideTheModal == null){
// задержка 7 секунд
setTimeout(function(){
// вызвать модальное окно
$('#opn-win').modal();
// если кнопка "Закрыть" нажата
$('.close-modal').click(function(){
// добавить cookie
$.cookie('hideTheModal', { expires: 30 });
});
}, 7000);
}
});
К началу

Заключение


Создать всплывающее окно с помощью jQuery не сложно. Использовать этот подход или нет будет зависеть от содержания вашего сайта. Всплывающее окно может иметь разные веб-формы, например, форму регистрации или подписка на ленту RSS и т.д…


Скачать код полностью


Если требуется еще проще код всплывающего окна, рекомендую обратить внимание на «HTML5 dialog в документе» или «Модальное окно Bootstrap Modal». Создать модальное окно с куки можно на чистом jаvascript хотите узнать как, смотрите страницу «Отправить cookie в браузер».


САМОЕ ЧИТАЕМОЕ / КОММЕНТИРУЕМОЕ
  1. Explzh 7.77
  2. Пять проблем, которые могут проявиться при выращивании томатов
  3. ЕС и США возбудили уголовные дела против Петра Порошенко
  4. Сводки с Фронта ДНР за 24 - 25 Марта 2019 г
  5. Военным России предоставят своего собственного мобильного оператора
  6. Пoрядкa 90 cпopтсменoв Дoнбacca откpыли в Дoнецке мacштaбный фестивaль бopьбы
  7. Порошенко обвинил Медведчука и Бойко в желании посадить Украину на «российскую газовую иглу»
  8. Неопытный врач повредила внутренние органы роженицы, дернув за пуповину. Девушка скончалась в муках.
  9. Премьер-министр России встретился с Медведчуком и Бойко
  10. В ДНP уcилят кoнтpoль зa пpoизвoдствoм и oбopoтом aлкоголя и табaчныx изделий.
В Москве похоронили певицу Юлию Началову
В Москве похоронили певицу Юлию Началову
Церемония прощания прошла в ритуальном зале Троекуровского кладбища. В Москве на Троекуровском кладбище похоронили известную Читать далее
В Москве умерла певица Юлия Началова.
В Москве умерла певица Юлия Началова.
Российская певица Юлия Началова скончалась 16 марта в Москве в возрасте 38 лет, сообщила представительница артистки Анна Исаева. Читать далее
Вера Брежнева отказалась считать себя украинской певицей
Вера Брежнева отказалась считать себя украинской певицей
Певица Вера Брежнева призналась в интервью на Youtube-канале "Эмпатия манучи", что не считает себя украинской певицей. Ведущий Читать далее
Юлия Началова впала в состояние комы. У нее начали отказывать внутренние органы
Юлия Началова впала в состояние комы. У нее начали отказывать внутренние органы
Певица Юлия Началова находится в состоянии искусственной комы. Об этом в среду, 13 марта, сообщила PR-менеджер исполнительницы Читать далее
Все новости Шоу
Любовь похожа на прошедший дождь
Любовь похожа на прошедший дождь
Когда-то Акира Татибана серьёзно занималась лёгкой атлетикой, но была вынуждена оставить спорт из-за травмы. Теперь жизнь Читать далее
Мост в звездное небо [ТВ]
Мост в звездное небо [ТВ]
Братья Хосино приезжают в небольшой городок Ямабико, чтобы младший, 13-летний Аюму, поправил здоровье, а старший, 17-летний Читать далее
Девы Галилея
Девы Галилея
Действие разворачивается в 2061 году. На носу новый ледниковый период. Трое потомков Галилео Галилея - сёстры Ходзуки, Хадзуки и Читать далее
Восхождение Героя щита
Восхождение Героя щита
Иватани Наофуми затворник. Все свои дни он обычно проводил за играми и мангой. Но внезапно, неожиданно для себя, Иватани Читать далее
Все Аниме
«    Март 2019    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031
Галерея новостей
ЕС и США возбудили уголовные дела против Петра Порошенко
ЕС и США возбудили уголовные дела против Петра Порошенко
Военным России предоставят своего собственного мобильного оператора
Военным России предоставят своего собственного мобильного оператора
Порошенко обвинил Медведчука и Бойко в желании посадить Украину на «российскую газовую иглу»
Порошенко обвинил Медведчука и Бойко в желании посадить Украину на «российскую газовую иглу»
Неопытный врач повредила внутренние органы роженицы, дернув за пуповину. Девушка скончалась в муках.
Неопытный врач повредила внутренние органы роженицы, дернув за пуповину. Девушка скончалась в муках.
Премьер-министр России встретился с Медведчуком и Бойко
Премьер-министр России встретился с Медведчуком и Бойко
Пропавший 9-летний мальчик, которого искали сотни людей, спал у друга дома, а пока его искали от переживаний умерла его бабушка.
Пропавший 9-летний мальчик, которого искали сотни людей, спал у друга дома, а пока его искали от переживаний умерла его бабушка.
Парень отправил в нокдаун двоих собутыльников своей девушки
Парень отправил в нокдаун двоих собутыльников своей девушки
Россия готовится к массовой выдаче паспортов жителям Донбасса.
Россия готовится к массовой выдаче паспортов жителям Донбасса.
Митинг Петра Порошенко на Западной Украине обернулся дракой
Митинг Петра Порошенко на Западной Украине обернулся дракой
В Ростовской области 16-летняя школьница родила в туалете и спрятала малыша в пакет и выбросила
В Ростовской области 16-летняя школьница родила в туалете и спрятала малыша в пакет и выбросила
Владимир Зеленский: Сторонники Новороссии – зомби. Нужна информационная война против ЛДНР.
Владимир Зеленский: Сторонники Новороссии – зомби. Нужна информационная война против ЛДНР.
В Сорочинске бывший муж в порыве злости сбил на большой скорости свою экс возлюбленную.
В Сорочинске бывший муж в порыве злости сбил на большой скорости свою экс возлюбленную.
Аптеки Мариуполя развернули торговлю наркотиками
Аптеки Мариуполя развернули торговлю наркотиками
По России пройдет акция за признание ДНР и ЛНР
По России пройдет акция за признание ДНР и ЛНР
На Урале молодая девушка с парнем зарезала свою семью
На Урале молодая девушка с парнем зарезала свою семью