Модальные окна используются довольно часто. В них очень удобно выводить различные формы, создавать галереи и даже показывать видео. Выглядит такой интерфейс тоже весьма эффектно.
Многие ошибочно считают, что создание модальных окон для 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();
});
});