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

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

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

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

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

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

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

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

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

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *