Kuinka alkuperäinen dialog-elementti toimii?

Question

Accepted Answer

`<dialog>` on alkuperäinen elementti **modaaleille ja dialogeille**. Se käsittelee fokuksen kiinnittämisen, taustan, ylemmän kerroksen ja Escape-sulkemisen — ominaisuudet, jotka sinun muuten pitäisi rakentaa manuaalisesti paljon JavaScriptiä ja ARIA:ta käyttäen.

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

## Avaaminen ja sulkeminen JS:ssä

```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ä saat ilmaiseksi showModal():illa

- **Fokuksen kiinnittäminen** — Tab pysyy dialoogin sisällä kun se on avoinna.
- **Tausta** — tyyliteltävissa `::backdrop`:in kautta, ja klikkaaminen ulkopuolella on havaittavissa.
- **Ylempi kerros** — renderöidään kaiken yläpuolelle riippumatta `z-index`:istä.
- **Escape-näppäin** sulkee sen.
- **`method="dialog"`** lomakkeella sulkee dialoogin ja tallentaa, mikä painike lähetettiin.

## Taustan tyylittäminen

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

## Miksi sillä on merkitystä

Ennen `<dialog>`:ia saavutettavat modaalit vaativat manuaalista fokuksenhallintaa, ARIA-rooleja, vierityksen lukitsemista ja Escape-käsittelyä — pahamaineinen virheenlähde.

Alkuperäinen elementti antaa sinulle kaiken tämän oikein valmiiksi.

Käytä `showModal()`:ia oikeille modaaleille; se on moderni, saavutettava oletusarvo dialogeille.