Kif taħdem l-element `` nattiv?

Question

Kif taħdem l-element `<dialog>` nattiv?

Accepted Answer

`<dialog>` huwa l-element nattiv għal **modals u dialogs**. Iħaddan il-focus trapping, il-backdrop, il-top layer, u l-Escape-to-close — features li għal skond, ikollok tinnissilhom manwalment bi ħafna JavaScript u 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>
```

## Iftaħ u għeluq f'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
});
```

## Dak li tikseb b'xejn ma' showModal()

- **Focus trapping** — Tab jibqa' ġewwa d-dialog filwaqt li huwa miftuħ.
- **Backdrop** — jista' jintsaħaħ permezz ta' `::backdrop`, u klik barra huwa detettabbli.
- **Top layer** — jiġi muri fuq kollox irrispettivament ta' `z-index`.
- **Tasta Escape** tgħelqu.
- **`method="dialog"`** fuq form tgħeluq il-dialog u tirrigistra liema buttuna ġiet sottomessa.

## Stil tal-backdrop

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

## Għalfejn dan importanti

Qabel `<dialog>`, modals aċċessibli kellhom bżonn ġestjoni ta' focus manwali, rwoli ta' ARIA, scroll locking, u trattament ta' Escape — sors ta' bugs magħruf.

L-element nattiv jagħtik lkoll dan kif il-ħaġa mir-riħ.

Uża `showModal()` għal true modals; din id-default moderna u aċċessibli għad-dialogs.