Hur fungerar det inbyggda dialog-elementet?

Question

IT Interview Practice · Accepted Answer

`<dialog>` är det inbyggda elementet för **modaler och dialoger**. Det hanterar fokusupplåsning, bakgrunden, det översta lagret och Escape-för-att-stänga — funktioner som du annars skulle behöva bygga manuellt med mycket JavaScript och 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>
```

## Öppna och stänga 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
});
```

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

- **Fokusupplåsning** — Tab håller sig inne i dialogen medan den är öppen.
- **Bakgrund** — stilbar via `::backdrop`, och klickning utanför är detekterbar.
- **Översta lager** — renderas ovanför allt oavsett `z-index`.
- **Escape-tangenten** stänger den.
- **`method="dialog"`** på ett formulär stänger dialogen och registrerar vilken knapp som skickade in.

## Formatera bakgrunden

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

## Varför det spelar roll

Före `<dialog>` krävde tillgängliga modaler manuell fokushantering, ARIA-roller, scroll-låsning och Escape-hantering — en känd källa till fel.

Det inbyggda elementet ger dig allt detta korrekt ur lådan.

Använd `showModal()` för äkta modaler; det är det moderna, tillgängliga standardvalet för dialoger.

Öppna och stänga i JS

Vad du får gratis med showModal()

Formatera bakgrunden

Varför det spelar roll

Relaterade frågor