Kepiye cara kerja elemen dialog nativo?

Question

Accepted Answer

`<dialog>` minangka elemen nativo kanggo **modals lan dialogs**. Nangani focus trapping, backdrop, top layer, lan Escape-to-close — fitur sing liyane kudu dibangun kanthi JavasScript lan ARIA sing akeh.

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

## Mbukaake lan nutup ing 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
});
```

## Apa sing dicedhaki kanthi gratis nganggo showModal()

- **Focus trapping** — Tab tetap ing dialog nalika mbukak.
- **Backdrop** — bisa distyling liwat `::backdrop`, lan klik ing njaba bisa dideteksi.
- **Top layer** — nggambar ndhuwur siji-sijine ora pilih saka `z-index`.
- **Tombol Escape** nutup iku.
- **`method="dialog"`** ing form nutup dialog lan ngrekam button endi sing ngirim.

## Styling backdrop

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

## Mengapa iku penting

Sadhengahe `<dialog>`, modals sing accessible mbutuhake manajemen focus manual, peran ARIA, scroll locking, lan tanganan Escape — sumber bug sing masyhur.

Elemen nativo menehi sampeyan kabeh iku kanthi bener saka box.

Gunakake `showModal()` kanggo modals sejati; iku default modern lan accessible kanggo dialogs.