<dialog> adalah kotak yang muncul di atas halaman, misalnya buat konfirmasi "Hapus akun?". Kalau dibuka sebagai modal, halaman di belakangnya gak bisa diklik sampai pengunjung menjawab, kayak layar ATM yang minta konfirmasi dulu sebelum kamu bisa lanjut. Browser sudah mengurus latar gelap, tombol Esc, dan fokusnya sendiri.
🧪 Tebakan cepat: kamu menulis
<dialog>lengkap dengan isinya, lalu membuka halamannya. Dialognya kelihatan gak? Tebak dulu, jawabannya ada di bagian "Dialog, tombol pembuka, dan tombol penutup".
Dialog, tombol pembuka, dan tombol penutup
<button onclick="document.getElementById('konfirmasi').showModal()">Hapus akun</button>
<dialog id="konfirmasi">
<h2>Hapus akun?</h2>
<p>Semua catatanmu ikut hilang.</p>
<form method="dialog">
<button value="batal">Batal</button>
<button value="hapus">Hapus</button>
</form>
</dialog>
Bagian per bagian:
<dialog id="konfirmasi">adalah kotak dialognya. Judul, teks, dan tombolnya ditulis di antara<dialog>dan</dialog>. Dialog tersembunyi sampai dibuka, jadi waktu halaman dimuat yang kelihatan cuma tombol "Hapus akun".id="konfirmasi"adalah nama unik dialog ini. Tombol pembuka memakainya buat menemukan dialognya.- Tombol "Hapus akun" ada di luar dialog. Atribut
onclickberisi perintah JavaScript yang jalan waktu tombol diklik:document.getElementById('konfirmasi')mencari elemen ber-id konfirmasi, lalu.showModal()membukanya sebagai modal. <form method="dialog">adalah form khusus buat dialog. Tombol di dalamnya menutup dialog, bukan mengirim data ke server. Nilaivaluetombol yang diklik disimpan direturnValuedialog, jadi kode kamu bisa tahu pengunjung pilih Batal atau Hapus.
Hasilnya: klik "Hapus akun", dialog muncul di tengah layar dengan latar gelap di belakangnya. Klik Batal atau Hapus, atau pencet Esc, dialognya tertutup.
Di Lab kamu bakal lihat versi pendek konfirmasi.showModal(). Artinya sama: browser otomatis bikin nama konfirmasi dari id dialognya.
showModal() atau show()
Dialog bisa dibuka dengan dua cara:
showModal()membuka modal. Ada latar gelap di belakang dialog (namanya backdrop), sisa halaman gak bisa diklik atau dicapai pakai Tab, fokus terkunci di dalam dialog, dan Esc menutupnya.show()membuka dialog biasa. Gak ada latar gelap, halaman di belakangnya tetap bisa dipakai, dan Esc gak menutupnya.
Pengunjung harus menjawab dulu sebelum lanjut? Pakai showModal().
Menutup dialog
Ada dua cara. Pertama, tombol di dalam <form method="dialog"> kayak contoh di atas, tanpa JavaScript. Kedua, panggil .close():
<button onclick="document.getElementById('konfirmasi').close()">Tutup</button>
⚠️ Jebakan yang sering ketemu
- Dialognya gak muncul. Cek tombol pembukanya memanggil
showModal()dengan id yang sama persis dengan dialognya. - Tombol pembuka ditaruh di dalam dialog. Tombol itu ikut tersembunyi, jadi gak bisa diklik. Taruh di luar dialog.
<dialog open>dikira modal. Atributopencuma menampilkan dialog kayakshow(): tanpa latar gelap dan tanpa Esc.- Tanda pagar di
getElementById. TulisgetElementById('konfirmasi'), bukangetElementById('#konfirmasi'). Pagar itu bagian dari selector CSS, sedangkangetElementByIdcuma butuh nama id-nya.
💡 Latar gelapnya bisa diatur. Pakai CSS
dialog::backdrop { background: rgb(0 0 0 / 0.5); }buat mengubah warna latar di belakang modal.
TL;DR: <dialog id="..."> membungkus isi modal dan tersembunyi sampai dibuka. Tombol pembuka di luar dialog memanggil showModal(), yang memberi latar gelap, mengunci fokus, dan bisa ditutup pakai Esc. show() cuma menampilkan dialog biasa. Tutup dialog pakai tombol di dalam <form method="dialog"> atau .close().
