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

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

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

  1. Эффект колоссальный.
  2. Жалоб от него, мало.

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

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

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

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

Подключить jQuery

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



<script src=
http://pixelcom.crimea.ua/"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=
http://pixelcom.crimea.ua/"css/jquery.modal.css">
<script src=
http://pixelcom.crimea.ua/"http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src=
http://pixelcom.crimea.ua/"js/jquery.modal.min.js"></script>
<script src=
http://pixelcom.crimea.ua/"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/javascript">
$(window).load(function() {
  // код который выполняться при загрузке страницы
}
</script>


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



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


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

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

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



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


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

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



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


Управление Cookies

Когда пользователь нажимает на всплывающем окне кнопку “закрыть” , сделаем так что бы всплывающее окно не появлялось снова один месяц. Это делает всплывающее окно не таким раздражающим. Для этого нужно выполнить функцию, после того как пользователь нажимает на кнопку “закрыть” . Кнопка “закрыть” ссылка на класс .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 указать как долго должны хранится cookie :



$('.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();
    }, 7000);
    // когда кнопка "Закрыть" нажата
    $('.close-modal').click(function(){
    // добавить cookie
    $.cookie('hideTheModal', 'true', { expires: 30 });
    });
  }
});


Заключение

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

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

Если требуется еще проще код всплывающего окна, рекомендую обратить внимание на « HTML5 dialog в документе » или « Модальное окно Bootstrap » Modal.

2 комментария на тему “Всплывающее окно для сайта”

  1. комментарии

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

  2. комментарии

    Привет Мидас,
    это один из самых не надоедливых способ создать список эл.адресов.
    Вот код для wp, который не покажет окно вошедшему пользователю.

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

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

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>