Справочник HTML & CSS

<dialog>

Диалоговое окно; модальное открывается методом `showModal()` и блокирует остальную страницу.

Синтаксис

<dialog id="d">…</dialog>

Атрибуты

Параметр	Тип	Описание
open	—	Показать диалог как обычный блок (без затемнения фона).
closedby	any \| closerequest \| none	Необязательный. Чем можно закрыть: кликом снаружи, клавишей Esc или ничем.

Примеры

Модальное окно с кнопкой закрытия:

<button onclick="note.showModal()">Show the offer</button>
 
<dialog id="note">
  <p>Today only: a free cookie with every latte!</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

Оформление окна и фона под ним:

<style>
  dialog { border: none; border-radius: 12px; padding: 20px; }
  dialog::backdrop { background: rgb(0 0 0 / 0.5); }
</style>
 
<button onclick="d.showModal()">Open</button>
<dialog id="d"><p>Styled dialog</p><button onclick="d.close()">OK</button></dialog>

Примечания

showModal() открывает окно поверх страницы, затемняет фон через ::backdrop и закрывается клавишей Esc. Форма с method="dialog" закрывает диалог при отправке. Атрибут open для модальных окон не используют — он показывает немодальный вариант.

См. также

<details>, <summary> — Раскрывающийся блок без JavaScript: `<summary>` — видимый заголовок, остальное скрыто до клика.
popover — Превращает элемент во всплывающий слой поверх страницы — без JavaScript.
<form> — Форма: собирает данные из полей и отправляет их на сервер.
inert — Делает часть страницы неактивной: по ней нельзя кликнуть, перейти клавишей Tab или выделить текст.

Вопросы и ответы по теме

В учебнике

Раскрывающиеся блоки и диалоги — Тег details и summary, аккордеон, модальное окно dialog, закрытие через form method=dialog и всплывающие блоки popover.

Спасибо, что читаете!