Стилизация модальных окон и диалогов

Элемент HTML <dialog> предоставляет встроенное поведение модального окна: удержание фокуса, закрытие клавишей Esc и программный интерфейс showModal() / close(). Стилизуйте его с помощью CSS вместо самостоятельного создания всей структуры модального окна.

Псевдоэлемент ::backdrop стилизует подложку за открытым элементом <dialog>. Задайте полупрозрачный фон: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Обёртка div не требуется.

Центрируйте диалоги с помощью CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. Автоматический внешний отступ диалога размещает его по центру области просмотра без позиционирования с помощью JS.

Задайте overflow-y: auto для самого диалога, чтобы обрабатывать длинное содержимое. При открытии модального окна задайте overflow: hidden для body, чтобы запретить прокрутку фона; добавляйте и удаляйте класс с помощью JavaScript, переключая это состояние.

Анимируйте появление диалога с помощью @starting-style (Chrome 117+) — это позволяет создавать анимации появления только средствами CSS, без JavaScript. Для более широкой поддержки добавьте с помощью JavaScript класс открытого состояния и примените переходы к преобразованию и прозрачности: сдвигайте диалог вверх от смещения на 20 пикселей по оси Y к нулевому смещению.

Анимировать закрытие диалога непросто: при закрытии он скрывается немедленно. Решения: используйте API всплывающих окон, который изначально поддерживает анимации закрытия, либо перехватите закрытие с помощью JavaScript, примените класс анимации выхода, а после её завершения вызовите метод закрытия.

Открытые диалоги отображаются поверх всего остального содержимого страницы. Избегайте конфликтов при управлении порядком наложения, используя встроенный контекст наложения элемента диалога: он отображается в верхнем слое выше всех значений CSS z-index, поэтому задавать z-index самому диалогу не требуется.

На мобильных устройствах выдвигайте диалоги снизу в виде листа: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. На настольных устройствах центрируйте их как обычное модальное окно с помощью автоматических внешних отступов.

Нативный элемент диалога при открытии автоматически переводит фокус на первый доступный для фокусировки элемент внутри. Обеспечьте логичный порядок перехода по элементам клавишей Tab в диалоге. Добавьте кнопку закрытия, которая после закрытия диалога возвращает фокус на элемент, открывший его, чтобы сохранить правильную последовательность клавиатурной навигации.

Добавьте aria-labelledby со ссылкой на заголовок диалога и aria-describedby со ссылкой на его описание. Для <dialog> роль диалога задаётся неявно. Программы чтения с экрана озвучивают эти метки при переходе фокуса в диалог.

Диалогу подтверждения необходимы: понятный заголовок-вопрос, краткое описание последствий, кнопка опасного действия (красная, выровненная по правому краю) и кнопка отмены (выровненная по левому краю или вторичная). Используйте autofocus для кнопки отмены, чтобы безопасный вариант был действием по умолчанию при навигации с клавиатуры.

Какое преимущество даёт использование нативного элемента <dialog> по сравнению с модальным окном на основе пользовательского div?

Нативный элемент диалога с подложкой, центрированием с помощью автоматических внешних отступов, управлением переполнением, CSS-анимациями появления и управлением фокусом предоставляет полностью доступный шаблон модального окна, управляемый CSS. Адаптивные листы на мобильных устройствах и правильные атрибуты ARIA завершают готовый к использованию компонент диалога.