Создаём Модальное Окно Для Web Приложения Без Плагинов И Фреймворков

[Sascha]

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

Многие ошибочно считают, что создание модальных окон для web приложения задача не из лёгких и потому задействуют для её решения плагины и фреймворки. На самом же деле создать модальное окно очень просто. Всё, что для этого потребуется обычные HTML, CSS и jQuery.


Вначале создадим HTML вёрстку. В нашем примере при появлении модального окна фон страницы будет затемняться. Поэтому создадим два контейнера. Первый из них будет обеспечивать затемнение фона (класс overlay), а второй представлять собой собственно модальное окно (класс modal).

Ниже приведён код вёрстки:

<button id="show">Показать модальное окно!</button>
<div class="overlay"></div>
<div class="modal">
<span class="close">X</span>
<h3>Модальное окно</h3>
<p>Текст в модальном окне</p>
</div>

Элемент span с классом close будет служить своего рода кнопкой для закрытия модального окна (аналог «крестика» в Windows).

Зададим оформление соответствующих элементов вёрстки при помощи CSS:

.close{
cursor: pointer;
position: absolute;
right: 15px;
text-align: center;
top:15px;
}
.modal{
background-color: white;
display: none;
height: 300px;
left:50%;
margin-left: -200px;
margin-top:-150px;
position: fixed;
top:50%;
width: 400px;
z-index: 1000;
}
.overlay{
background-color: black;
bottom:0;
display: none;
left:0;
margin: 0;
opacity: 0.65;
position: fixed;
top:0;
right: 0;
z-index: 999;
}

Теперь, чтобы модальное окно заработало нужно добавить обработку соответствующих событий на JavaScript. Модально окно будет появляться при нажатии на кнопу (элемент button) и закрываться при клике на «крестик» или затемнённый фон.

$(document).ready(function () {
/*Показ модального окна*/
$('#show').on('click',
function () {
$('.overlay,.modal').show();
}
);
/*Закрытие модального окна*/
$('.overlay,.close').on('click',function(){
$('.overlay,.modal').hide();
});
});

Конечный результат показан на скриншоте ниже.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.