Kako deluje nativni element dialog?

Question

IT Interview Practice · Accepted Answer

`<dialog>` je nativni element za **modalne okne in dialoge**. Oskrbuje zajetjem žarišča, ozadjem, vrhnjim slojem in Escape-za-zapiranje — funkcije, ki bi jih sicer ročno gradili z veliko JavaScripta in 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>
```

## Odpiranje in zapiranje v 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
});
```

## Kaj dobite zastonj z showModal()

- **Zajemanje žarišča** — Tab ostane znotraj dialoga, medtem ko je odprt.
- **Ozadje** — stilizirljivo prek `::backdrop`, in klik zunaj je zaznavno.
- **Vrhnji sloj** — se upodablja nad vsem ne glede na `z-index`.
- **Tipka Escape** ga zapre.
- **`method="dialog"`** na obrazcu zapre dialog in zabeleži, kateri gumb je poslal.

## Stiliziranje ozadja

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

## Zakaj je to pomembno

Pred `<dialog>` so dostopni modalni okna zahtevala ročno upravljanje žarišča, ARIA vloge, zaklepanje drsnika in Escape obdelavo — znana vrsta napak.

Nativni element vam to vse zagotovi pravilno že od začetka.

Uporabite `showModal()` za resnične modalne okne; to je sodoben, dostopen privzetek za dialoge.

Odpiranje in zapiranje v JS

Kaj dobite zastonj z showModal()

Stiliziranje ozadja

Zakaj je to pomembno

Povezana vprašanja