Hogyan működik a natív dialog elem?

Question

Accepted Answer

A `<dialog>` a natív elem **modális ablakok és dialógusok** számára. Kezeli a fókusz csapdázást, a hátteret, a felső réteget és az Escape-lezárást — olyan funkciókat, amelyeket másképp nagyon sok JavaScripttel és ARIA-val kellene saját kezűleg megépítened.

```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>
```

## Megnyitás és bezárás JavaScriptben

```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
});
```

## Mit kapsz ingyen a showModal()-vel

- **Fókusz csapdázás** — A Tab billentyű a dialog nyitva tartása alatt annak belsejébe szorulva marad.
- **Háttér** — stílusozható a `::backdrop`-on keresztül, és a kívülre kattintás detektálható.
- **Felső réteg** — a `z-index` függetlenül mindenek felett jelenik meg.
- **Az Escape billentyű lezárja.**
- **`method="dialog"`** egy formon bezárja a dialógust és rögzíti, hogy melyik gomb lett elküldve.

## A háttér stílusozása

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

## Miért fontos

A `<dialog>` előtt az akadálymentes modális ablakok kézi fókusz kezelést, ARIA-szerepeket, görgetési zárást és Escape-kezelést igényeltek — a hibák egy híres forrása.

A natív elem mindezeket helyesen rögtön, dobozból adja neked.

Használd a `showModal()`-t igazi modális ablakokhoz; ez a modern, akadálymentes alapértelmezés a dialógusokhoz.