Bagaimana cara kerja elemen dialog native?

Question

Accepted Answer

`<dialog>` adalah elemen native untuk **modal dan dialog**. Ini menangani perangkap fokus, latar belakang, lapisan teratas, dan Escape-untuk-menutup — fitur yang sebaliknya harus Anda bangun sendiri dengan banyak JavaScript dan 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>
```

## Membuka dan menutup di 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 yang Anda dapatkan gratis dengan showModal()

- **Perangkap fokus** — Tab tetap berada di dalam dialog saat terbuka.
- **Latar belakang** — dapat diatur gaya melalui `::backdrop`, dan klik di luar dapat dideteksi.
- **Lapisan teratas** — render di atas segalanya terlepas dari `z-index`.
- **Tombol Escape menutupnya.**
- **`method="dialog"`** pada formulir menutup dialog dan mencatat tombol mana yang dikirimkan.

## Mengatur gaya latar belakang

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

## Mengapa ini penting

Sebelum `<dialog>`, modal yang dapat diakses memerlukan manajemen fokus manual, peran ARIA, penguncian scroll, dan penanganan Escape — sumber bug yang terkenal.

Elemen native memberikan semua itu dengan benar dari kotak.

Gunakan `showModal()` untuk modal sejati; itu adalah standar modern dan dapat diakses untuk dialog.