Как работает встроенный элемент dialog?

Question

Accepted Answer

`<dialog>` — встроенный элемент для **модальных окон и диалогов**. Он обрабатывает перехват фокуса, фон, верхний слой и закрытие по Escape — функции, которые иначе пришлось бы реализовывать с помощью большого количества JavaScript и ARIA.

```html
<dialog id="myModal">
  <form method="dialog">           
    <h2>Confirm</h2>
    <p>Are you sure?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">OK</button>
  </form>
</dialog>
```

## Открытие и закрытие в JS

```js
const modal = document.getElementById("myModal");

modal.showModal(); // opens as a MODAL: backdrop + focus trapped + Esc closes
modal.show();      // opens as a NON-modal (no backdrop, page stays interactive)
modal.close("ok"); // closes, sets returnValue

modal.addEventListener("close", () => {
  console.log(modal.returnValue); // "ok" or "cancel" — from the button's value
});
```

## Что вы получаете бесплатно с showModal()

- **Перехват фокуса** — Tab остаётся внутри диалога во время его открытия.
- **Фон** — стилизируется через `::backdrop`, и клик снаружи можно отследить.
- **Верхний слой** — отображается выше всего, независимо от `z-index`.
- **Клавиша Escape** закрывает его.
- **`method="dialog"`** в форме закрывает диалог и записывает, какая кнопка была нажата.

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

```css
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog { border: none; border-radius: 8px; padding: 2rem; }
```

## Почему это важно

До появления `<dialog>`, доступные модальные окна требовали ручного управления фокусом, ролей ARIA, блокировки прокрутки и обработки Escape — частого источника ошибок.

Встроенный элемент даёт вам всё это правильно из коробки.

Используйте `showModal()` для истинных модальных окон; это современный и доступный стандарт для диалогов.