Wie funktioniert das native dialog-Element?

Question

Accepted Answer

`<dialog>` ist das native Element für **Modals und Dialoge**. Es verwaltet Focus-Trapping, den Hintergrund, die Top-Layer und Escape-zum-Schließen — Funktionen, die Sie sonst mit viel JavaScript und ARIA selbst implementieren müssten.

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

## Öffnen und Schließen in 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
});
```

## Was Sie mit showModal() kostenlos erhalten

- **Focus-Trapping** — Tab bleibt im Dialog, während dieser offen ist.
- **Hintergrund** — stilierbar über `::backdrop`, und Klicks außerhalb sind erkennbar.
- **Top-Layer** — wird unabhängig von `z-index` über allem gerendert.
- **Escape-Taste** schließt es.
- **`method="dialog"`** in einem Formularelement schließt den Dialog und speichert, welcher Button gesendet wurde.

## Styling des Hintergrunds

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

## Warum es wichtig ist

Vor `<dialog>` erforderten barrierefreie Modals manuelle Focus-Verwaltung, ARIA-Rollen, Scroll-Locking und Escape-Handling — eine berüchtigte Fehlerquelle.

Das native Element bietet Ihnen all das sofort und korrekt.

Verwenden Sie `showModal()` für echte Modals; es ist der moderne, barrierefreie Standard für Dialoge.