Практически каждый сайт использует модальные окна для различных целей: отображение уведомлений, подтверждение действий, сбор информации и прочее. В этой главе мы рассмотрим два способа отображения модальных окон: новый и универсальный.
Новые модальные окна
Новые модальные окна имеют очень простой синтаксис HTML:
<dialog open>Это модальное окно</dialog>
Для отображения модального окна, необходимо добавить атрибут open
К сожалению, обойтись совсем без JavaScript здесь невозможно, поэтому далее я приведу пример кода, который минимизирует ваше взаимодействие с JavaScript. Мы можем использовать DATA-атрибуты для задания идентификатора модального окна, которое будет перехватываться JavaScript. Работать с этим просто:
<dialog data-modal="my-first-modal">
<button class="close">×</button>
</dialog>
<button data-modal-open="my-first-modal">
Показать модальное окно
</button>
Здесь, в атрибуте data-modal, мы задаем идентификатор модального окна. А далее, в кнопке, позволяющей показать модальное окно, используя атрибут data-modal-open, мы говорим, что эта кнопка показывает модальное окно с нашим идентификатором.
Простое решение может выглядеть примерно так:
Стилизация
Модальное окно, открытое с помощью dialog.openModal(), имеет псевдоэлемент ::backdrop. Этот элемент является подложкой под модальным окном и растянут на весь экран. Обычно этот элемент красят в прозрачно-чёрный цвет и добавляют к нему backdrop-filter. Этот набор фильтров позволяет, например, размыть всю страницу кроме модального окна для создания акцента на окно.
Кроме того, можно добавить эффект появления модального окна. Для этого можно добавить немного CSS-кода:
dialog {
animation: fadeIn 250ms ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Этот код позволит модальному окну плавно появляться на экране.
Рассмотренный выше способ в 2019 году работает далеко не во всех браузерах. Поддержку этого способа браузерами можно посмотреть здесь: Can i use Dialog element?
Универсальные модальные окна
Что делать, если нужно поддерживать большее количество браузеров? Выход один - использовать старые методы. Код будет не так изящен, зато работать будет везде.
<button data-modal-open="hello-world">Открыть модальное окно</button>
<div class="modal" data-modal="hello-world">
<div class="dialog">
<button class="dialog-close" aria-label="Close modal"></button>
<section class="dialog-content">
<h2>Модальное окно</h2>
<p>Какой-то контент</p>
</section>
</div>
</div>
Конечно же, придётся добавить много стилей:
.modal {
/* Подложка будет занимать 100% площади экрана*/
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100vh;
z-index: 1000;
/* Скрываем подложку с модальным окном*/
display: none;
/* Overflow позволит нам скроллить модальное окно, если контента в нём будет больше, чем может поместиться на экране */
overflow-y: auto;
/* Цвет подложки */
background: rgba(0, 0, 0, 0.8);
/* Размытие фона */
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
/* Анимация появления */
animation: fadeIn 250ms ease-in-out;
/* Добавляем дополнительные стили */
align-items: flex-start;
justify-content: center;
padding: 5vh 0 10vh;
/* Через JavaScript мы будем добавлять атрибут open, что должно сделать модальное окно видимым*/
}
.modal[open] {
display: flex;
}
.modal .dialog {
/* Стилизуем само модальное окно */
width: 100%;
max-width: 960px;
min-height: 100px;
border-radius: 4px;
position: relative;
border: none;
color: white;
font-weight: 300;
}
.modal .dialog .dialog-close {
/* Стилизуем кнопку закрытия модального окна */
position: absolute;
top: 0;
right: 0;
width: 3em;
height: 3em;
background: none;
border: none;
cursor: pointer;
outline: none;
}
.modal .dialog .dialog-close::before,
.modal .dialog .dialog-close::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 5px;
left: 5px;
border-bottom: 1px solid white;
transform: rotate(45deg);
}
.modal .dialog .dialog-close::after {
transform: rotate(-45deg);
}
.modal .dialog .dialog-close:focus::before,
.modal .dialog .dialog-close:hover::before,
.modal .dialog .dialog-close:focus::after,
.modal .dialog .dialog-close:hover::after {
border-color: tomato;
}
.modal .dialog .dialog-content {
/* Дополнительные стили для контента*/
padding: 2em;
background-color: rgba(0, 0, 0, 0.6);
border: none;
}
/* Анимация появления*/
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Далее сложно: JavaScript. Чтобы уменьшить количество вашего взаимодействия с JavaScript, был снова сделан модуль, работающий через DATA-атрибуты. Всё, как и в предыдущий раз. С ним можно ознакомиться в коде примера:
Не изобретай велосипед
Часто, лучшим способом является не создание собственного "велосипеда", а использование уже готового продукта. Модальные окна здесь не исключение. Можно просто найти хороший модуль модальных окон, прочитать к нему документацию и использовать его. Тогда практически не придется задумываться насчёт JavaScript и вёрстки окна. Примером могут послужить Tingle или Micromodal.
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/
Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues