Создаем простое модальное окно с помощью JQuery
В этой статье мы рассмотрим, как создать простое всплывающее окно HTML:
Для начала создадим базовую HTML-разметку модального окна и открывающейся ссылки:
<!-- #modal - это id элемента DIV, который будет определен в коде ниже -->
<a href="#modal" name="modal">Простое модельное окно</a>
<!-- #customize - здесь будет располагаться модальное окно -->
<div id="modal" class="modalwindow">
<!-- Заголовок модального окна -->
<h2>Простое jQuery модальное окно</h2>
<!-- кнопка закрытия окна определяется как класс close -->
<a href="#" class="close">X</a>
<div class="content">
<!-- Содержимое модального окна -->
</div>
</div>В приведенном выше коде мы создали ссылку. Затем мы создали само всплывающее окно при нажатии на ссылку HTML.
Обратите внимание, что цель тега <a> должна строго соответствовать ID модального окна. В нашем случае ссылка указывает на #modal, и идентификатор модального окна также modal.
В следующем шаге нам нужно добавить стили модального окна:
.modalwindow {
position:fixed;
display:none; /* Скрываем модальное окно по умолчанию */
z-index:9999;
width:500px;
background: #FF5722;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
h2 {
background-color: #E64A19;
padding: 15px;
font-size: 25px;
color: #000;
margin: 0;
font-family: arial;
text-align: center;
}
.content {
padding: 20px;
color: #fff;
font-size: 22px;
line-height: 30px;
}
.close {
float: right;
margin-top: -47px;
margin-right: 15px;
width: 17px;
height: 17px;
display: block;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
font-weight: bold;
font-family: arial;
}Перед тем, как сделать всплывающее окно в HTML, осталось добавить JQuery, чтобы оно выводилось при клике по ссылке и размещалось в середине экрана:
//выбираем все теги с именем modal
$('a[name=modal]').click(function(e) {
//Отменяем поведение ссылки
e.preventDefault();
//Получаем тег A
var id = $(this).attr('href');
//Получаем ширину и высоту окна
var winH = $(window).height();
var winW = $(window).width();
//Устанавливаем всплывающее окно по центру
id.css('top', winH/2-id.height()/2);
id.css('left', winW/2-id.width()/2);
//эффект перехода
id.fadeIn(500);
});
//если нажата кнопка закрытия окна
$('.modalwindow .close').click(function (e) {
//Отменяем поведение ссылки
e.preventDefault();
$('.modalwindow').fadeOut(500);
});Сначала мы выбираем все теги <a> с name= “modal“, затем извлекаем из них ссылку href. После этого получаем ширину и высоту экрана, чтобы разместить всплывающее окно по середине.
Не забудьте подключить библиотеку JQuery, иначе создать всплывающее окно HTML не получится:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>Все готово, и наше простое JQuery модальное окно должно работать нормально.
Настройка cookies
Если вы не хотите, чтобы всплывающее окно выводилось каждый раз при загрузке страницы, тогда используйте cookies. Для этого создадим новый файл с именем popup.js. Он будет содержать весь код JS и JQuery. Сначала добавим в него функции createCookie(), readCookie() и eraseCookie():
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}После этого нужно изменить наш код JQuery для HTML всплывающего окна с текстом и поместить его в функцию с именем myPopup():
function myPopup() {
//Получаем тег A
var id = $('#modal');
//Получаем высоту и ширину окна
var winH = $(window).height();
var winW = $(window).width();
//Устанавливаем всплывающее окно по центру
id.css('top', winH/2-id.height()/2);
id.css('left', winW/2-id.width()/2);
//эффект перехода
id.fadeIn(500);
}Как видите, мы удалили функцию .click(), так как всплывающее окно не будет управляться внешней функцией. Мы также удалили e.preventDefault(). Следовательно, мы не будем использовать ссылку для вывода модального окна.
После того, как мы добавили эти четыре функции в файл popup.js, нужно добавить последнюю часть кода JQuery, которая будет закрывать всплывающее окно HTML.
//если нажата кнопка закрытия окна
$('.modalwindow .close').click(function (e) {
//отменяем поведение ссылки
e.preventDefault();
$('.modalwindow').fadeOut(500);
});Все готово. Давайте поэкспериментируем с функциями и сделаем так, чтобы модальное окно показывалось только каждые 7 дней. Для этого создаем переменную с именем popup, которая считывает cookies с именем popup:
// считываем куки 'popup'
var popup = readCookie('popup');Затем создаем конструкцию if else, чтобы проверить, существуют ли cookies. Если да, то ничего не делаем. Иначе входим в цикл, создаем cookies на 7 дней и выводим всплывающее окно при нажатии на ссылку HTML:
// Проверяем, существуют cookies или нет
if ( popup != 'hide' ) {
// если не существуют, создаем их на 7 дней
createCookie('popup','hide','7');
// выводим модельное окно.
myPopup();
} // если cookies существуют, ничего не происходит.Вот и все! Мы реализовали простую систему cookie. Теперь можно удалить следующую часть из HTML-кода, если мы используем куки:
<!-- #modal - это id элемента DIV, определяемый в коде ниже -->
<a href="#modal" name="modal">Simple Modal Window</a>Если у вас возникли какие-либо вопросы, оставьте их в комментариях!