Чтобы создать всплывающее окно, многие используют программы сторонних разработчиков, например,
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');
});
с именем
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 не сложно. Использовать этот подход или нет будет зависеть от содержания вашего сайта.
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
