Jak działa natywny element dialog?

Question

Accepted Answer

`<dialog>` to natywny element do **modali i dialogów**. Obsługuje pułapkę fokusa, backdrop, warstwę top layer i zamknięcie przez Escape — funkcje, które w innym wypadku musielibyśmy budować ręcznie z dużą ilością JavaScriptu i 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>
```

## Otwieranie i zamykanie w 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
});
```

## Co otrzymujesz za darmo z showModal()

- **Pułapka fokusa** — Tab pozostaje wewnątrz dialogu, gdy jest otwarty.
- **Backdrop** — stylizowany za pomocą `::backdrop`, a klikanie poza dialogiem jest wykrywalne.
- **Warstwa top layer** — renderuje się ponad wszystkim niezależnie od `z-index`.
- **Klawisz Escape** go zamyka.
- **`method="dialog"`** na formularzu zamyka dialog i zapisuje, który przycisk został wysłany.

## Stylizowanie backdropa

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

## Dlaczego to ważne

Przed `<dialog>` dostępne modale wymagały ręcznego zarządzania fokusem, ról ARIA, blokowania scrollu i obsługi Escape — notorycznego źródła błędów.

Natywny element zapewnia wszystko to poprawnie od razu.

Używaj `showModal()` do prawdziwych modali; to nowoczesny, dostępny standard dla dialogów.