Jak funguje nativní prvek dialog?

Question

Accepted Answer

`<dialog>` je nativní prvek pro **modální okna a dialogy**. Zpracovává zachycování ohniska, pozadí, horní vrstvu a zavření klávesou Escape — funkce, které byste jinak museli ručně vytvářet s velkým množstvím JavaScriptu a 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>
```

## Otevírání a zavírání v 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 získáte zadarmo s showModal()

- **Zachycování ohniska** — Tab zůstává uvnitř dialogu, když je otevřen.
- **Pozadí** — stylizovatelné pomocí `::backdrop`, a klik venku je detekovatelný.
- **Horní vrstva** — vykresluje se nad vším bez ohledu na `z-index`.
- **Klávesa Escape** jej zavře.
- **`method="dialog"`** na formuláři zavře dialog a zaznamená, který tlačítko bylo odeslán.

## Stylování pozadí

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

## Proč je to důležité

Před `<dialog>` vyžadovaly přístupná modální okna ruční správu ohniska, role ARIA, zamykání posunování a zpracování Escape — notoricky známý zdroj chyb.

Nativní prvek vám to všechno dává správně ihned z krabice.

Verejnýmíšejte `showModal()` pro opravdová modální okna; je to moderní, přístupný výchozí pro dialogy.