HTML-тег dialog — модальные окна без JavaScript-костылей

  • 29 апреля 2026

Как сверстать

Евгений Шкляр

Запрограммировать модальное окно — одна из самых частых задач во фронтенде. Раньше для этого брали готовую библиотеку, писали десятки строк JavaScript, вручную блокировали прокрутку страницы, управляли фокусом и добавляли затемнение через отдельный div. Всё это работало, но требовало много кода и было легко сломать.

В HTML уже давно есть специальный элемент для этого — тег <dialog>. Долго его поддержка была неполной, но с 2022 года он работает во всех современных браузерах, и теперь им можно пользоваться без оговорок.

Попробуйте сами

Удалить файл?

Файл будет удалён безвозвратно. Это действие нельзя отменить.

Нажмите Escape или кнопку «Отмена» — браузер закроет окно сам.

Как это устроено

Разметка минимальная:

<dialog id="myDialog">
  <h2>Заголовок</h2>
  <p>Содержимое окна</p>
  <button onclick="myDialog.close()">Закрыть</button>
</dialog>

По умолчанию <dialog> скрыт. Чтобы открыть его как модальное окно — с затемнением фона и блокировкой остальной страницы, — вызываем метод showModal():

document.getElementById('myDialog').showModal();

Закрываем через close():

document.getElementById('myDialog').close();

Всё. Никаких дополнительных div-ов для фона, никакой ручной блокировки прокрутки.

Что браузер делает за вас

Это самое ценное в нативном <dialog>. Браузер берёт на себя то, что раньше приходилось реализовывать вручную:

  • затемнение фона через псевдоэлемент ::backdrop
  • закрытие по клавише Escape
  • управление фокусом: при открытии фокус переходит внутрь окна, при закрытии — возвращается туда, откуда было вызвано
  • блокировку взаимодействия с остальной страницей

Стилизация фона

Полупрозрачный фон за окном стилизуется через псевдоэлемент ::backdrop:

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px); /* размытие фона — по желанию */
}

Простое vs модальное окно

У <dialog> два режима. show() открывает окно без блокировки страницы — как всплывающую панель. showModal() открывает настоящее модальное окно, которое перекрывает всё остальное:

dialog.show();      // просто показать, страница остаётся активной
dialog.showModal(); // модальный режим, всё остальное заблокировано

Поддержка в браузерах

<dialog> поддерживается в Chrome 37+, Firefox 98+, Safari 15.4+. Актуально на caniuse.com.

Что запомнить

<dialog> — нативный способ делать модальные окна. Браузер сам управляет фокусом, фоном и закрытием по Escape. Вам остаётся только разметка и пара строк JavaScript.

Если хотите узнать про другие HTML-элементы — загляните в статьи про <details> — раскрывающийся список и <progress> — шкала прогресса.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники