Kako funkcionira nativni dialog element?

Question

Accepted Answer

`<dialog>` je nativni element za **modalne dijalogе i dijaloge**. On rukuje hvatanjem fokusa, pozadinom, gornjim slojem i Escape-za-zatvaranje — funkcionalnostima koju bi inače trebao ručno izgraditi sa puno JavaScripta i 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>
```

## Otvaranje i zatvaranje u JS-u

```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
});
```

## Što besplatno dobivaš sa showModal()

- **Hvatanje fokusa** — Tab ostaje unutar dijaloga dok je otvoren.
- **Pozadina** — stilizabilna kroz `::backdrop`, a klik van je detektabilan.
- **Gornji sloj** — prikazuje se iznad svega bez obzira na `z-index`.
- **Tipka Escape ga zatvara.**
- **`method="dialog"`** na formi zatvara dijalog i bilježi koji gumb je poslан.

## Stiliziranje pozadine

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

## Zašto je to važno

Pre `<dialog>`, dostupni modalи su zahtevali ručno upravljanje fokusom, ARIA uloge, zaključavanje scroll-a i Escape rukovanje — poznati izvor grešaka.

Nativni element ti daje sve to ispravno odmah iz kutije.

Koristi `showModal()` za prave modalе; to je moderni, dostupan standard za dijaloge.