Penataan Modal dan Dialog

Elemen HTML <dialog> menyediakan perilaku modal bawaan: perangkap fokus, penutupan dengan Escape, serta API showModal() / close(). Tata elemennya dengan CSS, alih-alih membangun perancah modal kustom dari awal.

Elemen semu ::backdrop menata lapisan di belakang <dialog> yang terbuka. Terapkan latar belakang semitransparan: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Anda tidak memerlukan div pembungkus.

Pusatkan dialog dengan CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. Menggunakan margin: auto pada dialog akan menempatkannya di tengah area pandang tanpa pemosisian melalui JS.

Atur overflow-y: auto pada dialog itu sendiri untuk menangani konten yang panjang. Atur overflow: hidden pada body saat modal dibuka untuk mencegah pengguliran latar belakang—tambahkan dan hapus kelas dengan JavaScript untuk mengaktifkan atau menonaktifkan perilaku ini.

Animasikan kemunculan dialog menggunakan @starting-style (Chrome 117+) untuk animasi masuk yang hanya menggunakan CSS, tanpa JavaScript. Untuk dukungan yang lebih luas, tambahkan kelas terbuka dengan JavaScript dan gunakan transition pada transform dan opacity: slide-up dari translateY(20px) ke translateY(0).

Menganimasikan penutupan dialog cukup rumit—dialog langsung disembunyikan saat close() dipanggil. Solusinya adalah menggunakan API popover (yang mendukung animasi penutupan secara bawaan), atau mencegat penutupan dengan JavaScript, menjalankan kelas animasi keluar, lalu memanggil close() setelah animasi berakhir.

Dialog terbuka di atas semua konten halaman lainnya. Hindari konflik z-index dengan menggunakan konteks penumpukan bawaan elemen dialog—elemen ini dirender di lapisan teratas, di atas semua nilai z-index CSS, tanpa memerlukan pengaturan z-index pada dialog itu sendiri.

Pada perangkat seluler, geser dialog dari bawah seperti lembar: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. Pada komputer, pusatkan dialog sebagai modal tradisional menggunakan pola margin: auto.

Elemen dialog bawaan otomatis memindahkan fokus ke elemen pertama yang dapat menerima fokus di dalamnya saat dibuka. Pastikan urutan tab di dalam dialog logis. Tambahkan tombol penutup yang mengembalikan fokus ke elemen pemicu saat dialog ditutup agar alur navigasi keyboard berjalan dengan baik.

Tambahkan aria-labelledby yang menunjuk ke judul dialog dan aria-describedby yang menunjuk ke deskripsi dialog. Peran dialog tersirat untuk <dialog>. Pembaca layar mengumumkan label-label ini saat fokus memasuki dialog.

Dialog konfirmasi memerlukan judul berupa pertanyaan yang jelas, deskripsi singkat tentang dampaknya, tombol tindakan berisiko (berwarna merah dan rata kanan), serta tombol batal (rata kiri atau sekunder). Gunakan autofocus pada tombol batal agar pilihan yang aman menjadi interaksi keyboard bawaan.

Apa keunggulan menggunakan elemen <dialog> bawaan dibandingkan modal kustom berbasis div?

Elemen dialog bawaan dengan ::backdrop, pemusatan menggunakan margin: auto, pengendalian luapan, animasi CSS untuk kemunculan, dan pengelolaan fokus menyediakan pola modal yang sepenuhnya aksesibel dan dikendalikan oleh CSS. Tata letak lembar responsif pada perangkat seluler serta atribut ARIA yang tepat melengkapi komponen dialog yang siap digunakan dalam produksi.