Hvordan fungerer det native dialog-elementet?

Question

Accepted Answer

`<dialog>` er det native elementet for **modaler og dialoger**. Det håndterer fokus-trapping, backdrop, top layer, og Escape-to-close — funksjoner du ellers ville bygget manuelt med mye JavaScript og 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>
```

## Åpning og lukking i 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
});
```

## Hva du får gratis med showModal()

- **Fokus-trapping** — Tab blir værende inne i dialogen mens den er åpen.
- **Backdrop** — stiliserbar via `::backdrop`, og klikking utenfor er detekterbar.
- **Top layer** — rendres over alt uavhengig av `z-index`.
- **Escape-tast** lukker den.
- **`method="dialog"`** på et skjema lukker dialogen og registrerer hvilken knapp som ble sendt inn.

## Stilisering av backdrop

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

## Hvorfor det betyr noe

Før `<dialog>` krevde tilgjengelige modaler manuell fokushåndtering, ARIA-roller, scroll-låsing, og Escape-håndtering — en notorisk kilde til feil.

Det native elementet gir deg alt det korrekt ut av boksen.

Bruk `showModal()` for ekte modaler; det er den moderne, tilgjengelige standarden for dialoger.