Модальные окна — один из самых популярных элементов интерфейса, с которым часто приходится работать на фронтенде. Раньше, чтобы реализовать модалку, нам приходилось подключать внешние библиотеки или писать кастомные решения. Но в HTML5 появилась нативная поддержка модальных окон через
<dialog>, что значительно упрощает задачу.❌ Как было раньше:
<div class="modal hidden">
<p>Привет!</p>
<button onclick="closeModal()">Закрыть</button>
</div>
<style>
.hidden { display: none; }
</style>
<script>
// Какой то JS код
</script>➕ Как стало с <dialog>:
<dialog id="myDialog">
<p>Привет!</p>
<button onclick="myDialog.close()">Закрыть</button>
</dialog>
<button onclick="myDialog.showModal()">Открыть</button>Для реализации модальных окон часто использовался обычный
<div> с добавлением классов для отображения и скрытия, а также JavaScript для управления этим процессом. Чтобы скрыть или показать модалку, нужно было вручную изменять стили или использовать JS-функции.ℹ️ Как <dialog> упрощает работу и где полезно:
— .showModal(): открывает модалку
— .close(): закрывает модалку
— Улучшение доступности: <dialog> уже дружит с screen readers
— Браузер сам обрабатывает фон и клавишу Esc для закрытия окна
— Модальные окна (уведомления, формы, подтверждения)
— Быстрые прототипы без лишнего JS
📌 Если вам не нужно сложное оформление и анимации, то
<dialog> идеально подходит для реализации модальных окон с минимальными усилиями. Код при этом минималистичен. Конечно, для более сложных задач и дизайнов без дополнительных стилей и JavaScript не обойтись, но для простых задач пойдет.🚪 Frontender's notes