Всплывающее окно jQuery - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


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

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

Все должны видеть всплывающее окно по крайней мере один раз.
После возвращения на сайт посетители не видят всплывающее окно.
Для этого используется 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>


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



Если нужно, можно сделать так чтобы окно появлялось не сразу. Лучше когда есть небольшая задержка после открытия страницы сайта пользователем. Чтобы так сделать, нужно добавить метод 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:

Код
$(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 не сложно. Использовать этот подход или нет будет зависеть от содержания вашего сайта.

Важно!

При копировании материала указывать ссылку на источник.

- 378
- 04-Ноября-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта