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

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

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

  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/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(){
    // вызвать модальное окно
    $('#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». Создать модальное окно с куки можно на чистом JavaScript хотите узнать как, смотрите страницу «Отправить cookie в браузер».