Conas a bhíonn an eilimint dhiallóg dhúchais ag feidhmiú?

Question

Accepted Answer

Is é `<dialog>` an eilimint dhúchais do **bhogearraí agus dhiallóga**. Láimhseálann sé gealadh an fhócais, an cúlra, an phríomhchiseal, agus Escape-chun-a-dhúnadh — gnéithe ar a dhéanfadh tú a thógáil de láimh ar shlí eile le go leor JavaScript agus 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>
```

## Oscailt agus dúnadh 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
});
```

## Cad a fhaigheann tú go saor le showModal()

- **Gealadh an fhócais** — Fanann Tab laistigh den dhiallóg agus é oscailte.
- **Cúlra** — inchomhréiteach trí `::backdrop`, agus tá an cliceáil taobh amuigh senseable.
- **An phríomhchiseal** — déanann sé a thaisbhéanadh os cionn gach rud beag beann ar `z-index`.
- **Dúnann an eochair Escape é.**
- **`method="dialog"`** ar fhoirm dhúnann an diallóg agus cuirtear ar thaifead cén cnaipe a thug isteach.

## An cúlra a stíliú

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

## Cén fáth a bhfuil sé tábhachtach

Roimh `<dialog>`, bhí modúil inrochtana ag teastáil bainistiú fócais láimhe, róil ARIA, glas scrollála, agus láimhseáil Escape — foinse measartha fabhtanna.

Tugann an eilimint dhúchais duit go léir sin i gceart as an bhosca.

Baineann úsáid as `showModal()` le haghaidh fíor-bhogearraí; is é an réamhshocrú nua-aimseartha agus inrochtana do dhiallóga atá ann.