Hoe werkt het native `` element?

Question

Hoe werkt het native `<dialog>` element?

Accepted Answer

`<dialog>` is het native element voor **modals en dialogs**. Het regelt focus trapping, de backdrop, de top layer, en Escape-to-close — functies die je anders met veel JavaScript en ARIA zelf zou moeten bouwen.

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

## Openen en sluiten 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
});
```

## Wat je gratis krijgt met showModal()

- **Focus trapping** — Tab blijft in de dialog terwijl deze open is.
- **Backdrop** — styleerbaar via `::backdrop`, en klikken buiten is detecteerbaar.
- **Top layer** — rendert boven alles ongeacht `z-index`.
- **Escape-toets** sluit het.
- **`method="dialog"`** op een formulier sluit de dialog en registreert welke knop is ingediend.

## De backdrop stijlen

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

## Waarom het belangrijk is

Voor `<dialog>` vereisten toegankelijke modals handmatig focus management, ARIA roles, scroll locking, en Escape handling — een berucht bron van bugs.

Het native element geeft je al dit correct uit het vak.

Gebruik `showModal()` voor echte modals; het is de moderne, toegankelijke standaard voor dialogs.