Dialog modal adalah jenis kotak pop-up khusus pada halaman web: pop-up yang menyela pengguna untuk fokus pada dirinya sendiri. Ada beberapa kasus penggunaan yang valid untuk memunculkan dialog, tetapi pertimbangan besar harus dipertimbangkan sebelum melakukannya. Dialog modal memaksa pengguna untuk fokus pada konten tertentu, dan, setidaknya untuk sementara, mengabaikan sisa halaman.
Dialog dapat berupa modal (hanya konten dalam dialog yang dapat berinteraksi dengan) atau non-modal (masih mungkin untuk berinteraksi dengan konten di luar dialog). Dialog modal ditampilkan di atas konten halaman lainnya. Sisa halaman bersifat inert dan, secara default, tertutup oleh tampilan latar semi-transparan.
Elemen <dialog> HTML semantik untuk membuat dialog
dilengkapi dengan semantik, interaksi keyboard, serta semua properti dan metode antarmuka HTMLDialogElement.
Dialog modal
Berikut adalah contoh modal <dialog>. Buka dialog dengan tombol "Buka dialog modal". Setelah terbuka, ada tiga cara untuk menutup dialog: tombol escape, mengirimkan formulir dengan
tombol yang menetapkan formmethod="dialog" (atau jika formulir tersebut telah menetapkan method="dialog"), dan metode HTMLDialogElement.close().
HTMLDialogElement memiliki tiga metode utama, beserta semua metode yang diwarisi dari HTMLElement.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Karena <dialog> ini dibuka melalui metode HTMLDialogElement.showModal(), merupakan dialog modal. Membuka dialog modal akan menonaktifkan dan mengaburkan semua selain dialog itu sendiri. Jika Anda
mengarahkan kursor ke UI di luar dialog, Anda akan melihat semua elemen berperilaku seolah-olah pointer-events: none;
telah disetel; bahkan tombol yang membuka dialog tidak akan bereaksi terhadap interaksi.
Saat dialog dibuka, fokus akan berpindah ke dialog. Fokus disetel pada elemen pertama dalam urutan navigasi keyboard berurutan dalam dialog tersebut.
Jika menekan tombol tab berulang kali, Anda akan mendapati bahwa hanya konten dalam dialog yang bisa mendapatkan fokus saat dialog modal
terbuka. Segala sesuatu di luar dialog modal tidak akan aktif selama dialog terbuka.
Jika dialog ditutup, sebagai modal atau tidak, fokus akan dikembalikan ke elemen yang membuka dialog. Jika Anda secara terprogram membuka dialog yang tidak berdasarkan tindakan pengguna, pertimbangkan kembali. Jika perlu, pastikan bahwa fokus telah dikembalikan ke tempatnya sebelum dialog dibuka, terutama jika pengguna menutup dialog tanpa berinteraksi dengannya.
Ada atribut inert global yang dapat digunakan untuk menonaktifkan suatu elemen dan semua turunannya, selain dialog
aktif mana pun. Saat dialog modal dibuka menggunakan showModal(), inertness atau penonaktifan tersedia secara gratis; atributnya
tidak ditetapkan secara eksplisit.
Tampilan latar yang mengaburkan selain dialog dapat ditata gayanya menggunakan pseudo-element
::backdrop. Tampilan latar hanya ditampilkan ketika <dialog> ditampilkan dengan metode .showModal(). Elemen pseudo ini
cocok dengan semua tampilan latar, termasuk yang ditampilkan saat FullScreen API digunakan,
seperti saat menonton video dalam mode layar penuh yang tidak memiliki rasio aspek yang sama dengan layar atau monitor.
Dialog non-modal
HTMLDialogElement.show() juga akan membuka dialog, tetapi tanpa menambahkan tampilan latar atau menyebabkan apa pun menjadi tidak aktif.
Tombol escape tidak menutup dialog non-modal. Oleh karena itu, penting untuk memastikan Anda menyertakan metode
untuk menutup dialog non-modal. Dengan demikian, jika semakin dekat berada di luar dialog, sadari bahwa fokus akan mengarah ke elemen
yang membuka dialog, yang mungkin bukan pengalaman pengguna terbaik.
Walaupun tombol untuk menutup dialog tidak secara resmi diperlukan oleh spesifikasi, anggaplah ini sebagai diperlukan. Tombol escape akan menutup dialog modal, tetapi bukan dialog non-modal. Tombol yang terlihat dan dapat menerima fokus akan meningkatkan aksesibilitas dan pengalaman pengguna.
Menutup dialog
Anda tidak memerlukan metode HTMLDialogElement.close() untuk menutup dialog. Anda tidak membutuhkan JavaScript sama sekali. Untuk menutup <dialog>
tanpa JavaScript, sertakan formulir dengan metode dialog dengan menyetel method="dialog" pada <form> atau formmethod="dialog"
pada tombol.
Saat pengguna mengirimkan melalui metode dialog, status data yang dimasukkan pengguna akan dipertahankan. Meskipun ada peristiwa pengiriman—formulir melewati validasi batasan (kecuali novalidate ditetapkan)—data pengguna tidak akan dihapus atau dikirim.
Tombol tutup tanpa JavaScript dapat ditulis sebagai:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Anda mungkin telah melihat atribut autofocus
yang ditetapkan pada <button> penutup dalam contoh ini. Elemen dengan atribut autofocus yang ditetapkan dalam <dialog> tidak akan menerima
fokus pada pemuatan halaman (kecuali jika halaman dimuat dengan dialog terlihat). Namun, mereka akan mendapatkan fokus saat dialog dibuka.
Secara default, saat dialog dibuka, elemen pertama yang dapat difokuskan dalam dialog akan menerima fokus, kecuali jika elemen
lain dalam dialog memiliki kumpulan atribut autofocus. Menyetel atribut autofocus pada tombol tutup akan memastikan
atribut ini menerima fokus saat dialog dibuka. Namun, menyertakan autofocus dalam <dialog>
hanya boleh dilakukan dengan banyak pertimbangan. Semua elemen dalam urutan yang muncul sebelum elemen fokus otomatis dilewati.
Kami akan membahas atribut ini lebih lanjut di pelajaran fokus.
Antarmuka HTMLDialogElement menyertakan properti
returnValue. Mengirimkan formulir dengan method="dialog" akan menetapkan returnValue ke name, jika ada, dari tombol kirim yang digunakan untuk
mengirimkan formulir. Jika kita telah menulis <button type="submit" name="toasty">close</button>, returnValue akan menjadi toasty.
Saat dialog dibuka, atribut open boolean
akan muncul, yang berarti dialog aktif dan dapat berinteraksi. Saat dialog dibuka dengan menambahkan atribut open, bukan
melalui .show() atau .showModal(), dialog akan tanpa modal. Properti HTMLDialogElement.open
menampilkan true atau false, bergantung pada apakah dialog tersedia untuk interaksi—bukan apakah dialog tersebut adalah modal atau bukan.
Meskipun JavaScript adalah metode yang disarankan untuk membuka dialog, termasuk atribut open saat pemuatan halaman, lalu menghapusnya
dengan .close(), dapat membantu memastikan dialog tersebut tersedia meskipun JavaScript tidak tersedia.
Detail tambahan
Jangan gunakan tabindex
Elemen yang diaktifkan untuk membuka dialog dan tombol tutup yang ada di dalamnya (dan mungkin konten lainnya) dapat menerima
fokus dan bersifat interaktif. Elemen <dialog> tidak interaktif dan tidak menerima fokus. Jangan tambahkan properti tabindex
ke dialog itu sendiri.
Peran ARIA
Peran implisit adalah dialog. Jika dialog
adalah jendela konfirmasi yang menyampaikan pesan penting yang memerlukan konfirmasi atau respons pengguna lainnya, tetapkan role="alertdialog".
Dialog juga harus memiliki nama yang dapat diakses. Jika teks yang terlihat dapat memberikan nama yang dapat diakses, tambahkan aria-labelledby="idOfLabelingText".
Default CSS
Perlu diketahui bahwa browser menyediakan penataan gaya default untuk dialog. Firefox, Chrome, dan Edge menetapkan color: CanvasText; background-color: Canvas;
dan Safari menetapkan color: black; background-color: white; di stylesheet agen pengguna mereka. color diwarisi
dari dialog, bukan dari body atau :root, yang mungkin tidak diharapkan. Properti background-color tidak diwariskan.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang elemen dialog.
Bagaimana Anda menata gaya area di balik dialog?
::background.::backdrop.background.