Pernah ke ATM? Pas mau transaksi muncul layar kedua nge-overlay di depan, layar belakang gak bisa disentuh sampai kamu selesai (atau pencet "Batal"). Itu modal — UI pattern paling common di web. Dulu developer ribet bikin sendiri pake <div> + CSS z-index tumpuk-tumpukan + handler ESC manual + focus trap rumit. Sekarang HTML punya tag <dialog> native yang handle semua itu gratis.

💡 Sebelum reach for modal library, cek dulu <dialog>. Browser support sudah luas (2023+) dan kamu dapat banyak hal gratis: focus trap, ESC tutup, backdrop, accessible — semua otomatis. React-modal, headlessui modal seringkali overkill.

Sintaks <dialog> Dasar

<button id="buka-dialog">Buka Detail</button>

<dialog id="info">
  <h2>Info Pesanan</h2>
  <p>Pesanan kamu sudah dikirim.</p>
  <form method="dialog">
    <button>Tutup</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById("info");
  document.getElementById("buka-dialog").addEventListener("click", () => {
    dialog.showModal();
  });
</script>

Dua Cara Buka Dialog

• dialog.show() — dialog biasa (non-modal), halaman di belakang masih bisa diklik.
• dialog.showModal() — modal sesungguhnya: halaman belakang non-interaktif, ada backdrop otomatis, tombol Esc menutup dialog.

Form method="dialog"

Form khusus yang menutup dialog saat submit, tanpa reload halaman:

<form method="dialog">
  <button>Tutup</button>
</form>

Style Backdrop

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

Fitur Otomatis dari Browser

• Focus trap (Tab tidak keluar dari dialog).
• Tombol Esc menutup (kecuali kamu matikan).
• aria-modal="true" otomatis aktif untuk screen reader.
• Scroll halaman belakang dikunci.

🎭 Analogi sehari-hari

Pernah ke ATM? Pas mau transaksi muncul layar kedua nge-overlay di depan, layar belakang gak bisa disentuh sampai kamu selesai (atau pencet "Batal"). Kamu juga otomatis fokus ke input PIN, gak bakal salah pencet menu di belakang. Itu modal — dan tag <dialog> kasih kamu fitur ATM itu gratis di web. Dulu developer ribet bikin sendiri pake <div> + CSS z-index tumpuk-tumpukan + handler ESC manual + focus trap rumit. Sekarang tinggal tulis <dialog> + dialog.showModal(), browser otomatis ngurus semua: backdrop redup, ESC nutup, Tab gak kabur ke luar, layar belakang dikunci.

⚠️ Jebakan yang sering ditemui

• .show() vs .showModal() — show() biasa (tidak block background), showModal() = TRUE modal (background non-interactive + ESC tutup + backdrop).
• Hanya bisa di-tutup via .close() atau <form method="dialog"> button. Click backdrop tidak otomatis tutup — perlu listener custom.
• <dialog open> attribute = visible default, tapi tanpa showModal() tidak ada modal behavior.
• Style ::backdrop untuk overlay belakang dialog.
• Browser support 2022+ — Chrome/Firefox/Safari modern aman. Polyfill untuk lebih lama.
• returnValue dari <form method="dialog"> button — cara passing data dari modal close.
• Focus trap automatic — Tab tidak keluar dialog, Shift+Tab loop.

TL;DR: <dialog> = modal native browser — gantiin div+CSS z-index hack jaman dulu. dialog.showModal() (true modal: backdrop + ESC tutup + focus trap + scroll lock — semua GRATIS). .show() = non-modal. <form method="dialog"> close dialog tanpa reload. Style backdrop pakai dialog::backdrop. Browser support 2023+ udah aman. Cek dulu sebelum tarik library modal pihak ketiga.