Создаём модальное окно для web приложения без плагинов и фреймворков

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

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

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

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

<button id="show">Показать модальное окно!</button>

1	<button id="show">Показать модальное окно!</button>

Элемент 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;
}

.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();
    });
});

$(document).ready(function () {

/*Показ модального окна*/

$('#show').on('click',

function () {

$('.overlay,.modal').show();

}

);

/*Закрытие модального окна*/

$('.overlay,.close').on('click',function(){

$('.overlay,.modal').hide();

});

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

Модальное окно

Добавить комментарий Отменить ответ