Elemen dialog adalah elemen yang berguna untuk merepresentasikan jenis dialog apa pun di HTML, cari tahu cara kerjanya.
Dialog modal adalah jenis kotak pop-up khusus di halaman web: pop-up yang mengganggu pengguna untuk berfokus pada dirinya sendiri. Ada beberapa kasus penggunaan yang valid untuk menampilkan dialog, tetapi pertimbangan yang matang harus dilakukan sebelum melakukannya. Dialog modal memaksa pengguna untuk berfokus pada konten tertentu, dan, setidaknya untuk sementara, mengabaikan bagian halaman lainnya.
Dialog dapat berupa modal (hanya konten dalam dialog yang dapat berinteraksi) atau non-modal (masih dapat berinteraksi dengan konten di luar dialog). Dialog modal ditampilkan di atas konten halaman lainnya. Bagian lainnya dari halaman bersifat inert dan, secara default, dikaburkan oleh latar belakang semi-transparan.
Elemen <dialog> HTML semantik untuk membuat dialog
disertai semantik, interaksi keyboard, dan semua properti dan metode antarmuka HTMLDialogElement.
Dialog modal
Berikut adalah contoh modal <dialog>. Buka dialog dengan tombol "Buka dialog modal". Setelah dibuka, ada tiga cara untuk menutup dialog: tombol escape, mengirimkan formulir dengan
tombol yang telah menetapkan formmethod="dialog" (atau jika formulir itu sendiri 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(), ini adalah dialog modal. Membuka dialog modal akan menonaktifkan dan mengaburkan semua hal selain dialog itu sendiri. Jika kursor
diarahkan ke UI di luar dialog, Anda akan melihat semua elemen berperilaku seolah-olah pointer-events: none;
telah ditetapkan; bahkan tombol yang membuka dialog tidak bereaksi terhadap interaksi.
Saat dialog dibuka, fokus akan berpindah ke dialog. Fokus ditetapkan pada elemen pertama dalam urutan navigasi keyboard berurutan dalam dialog tersebut.
Jika menekan tombol tab berulang kali, Anda akan melihat bahwa hanya konten dalam dialog yang dapat mendapatkan fokus saat dialog modal
terbuka. Semua yang ada di luar dialog modal tidak aktif selama dialog terbuka.
Saat dialog ditutup, baik modal maupun tidak, fokus akan dikembalikan ke elemen yang membuka dialog. Jika Anda membuka dialog secara terprogram tanpa didasarkan pada tindakan pengguna, pertimbangkan kembali. Jika Anda harus melakukannya, pastikan fokus dikembalikan ke posisi semula sebelum dialog dibuka, terutama jika pengguna menutup dialog tanpa berinteraksi dengannya.
Ada atribut inert global yang dapat digunakan untuk menonaktifkan elemen dan semua turunannya, selain dialog aktif. Saat dialog modal dibuka menggunakan showModal(), inertness atau penonaktifan akan otomatis terjadi; atribut
tidak ditetapkan secara eksplisit.
Latar belakang yang mengaburkan semua hal selain dialog dapat diberi gaya menggunakan elemen pseudo
::backdrop. Latar belakang hanya ditampilkan saat <dialog> ditampilkan dengan metode .showModal(). Elemen pseudo ini
cocok dengan semua latar belakang, termasuk yang ditampilkan saat FullScreen API digunakan,
seperti saat melihat video dalam mode layar penuh yang tidak memiliki rasio aspek yang sama dengan layar atau monitor.
Dialog non-modal
HTMLDialogElement.show() juga membuka dialog, tetapi tanpa menambahkan latar belakang atau menyebabkan sesuatu menjadi tidak aktif.
Tombol escape tidak menutup dialog non-modal. Oleh karena itu, penting bagi Anda untuk menyertakan metode
menutup dialog non-modal. Dengan demikian, jika penutup berada di luar dialog, perhatikan bahwa fokus akan beralih ke elemen
yang membuka dialog, yang mungkin bukan pengalaman pengguna terbaik.
Meskipun tombol untuk menutup dialog tidak secara resmi diwajibkan oleh spesifikasi, anggaplah tombol tersebut sebagai wajib. Tombol escape akan menutup dialog modal, tetapi tidak menutup 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 memerlukan JavaScript sama sekali. Untuk menutup <dialog>
tanpa JavaScript, sertakan formulir dengan metode dialog dengan menetapkan method="dialog" di <form> atau formmethod="dialog"
di tombol.
Saat pengguna mengirimkan melalui metode dialog, status data yang dimasukkan pengguna akan dipertahankan. Meskipun ada peristiwa pengiriman—formulir akan melalui validasi batasan (kecuali jika novalidate ditetapkan)—data pengguna tidak 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> tutup dalam contoh ini. Elemen dengan atribut autofocus yang ditetapkan dalam <dialog> tidak akan menerima fokus saat halaman dimuat (kecuali jika halaman dimuat dengan dialog yang terlihat). Namun, keduanya akan mendapatkan fokus saat dialog dibuka.
Secara default, saat dialog dibuka, elemen pertama yang dapat difokuskan dalam dialog akan menerima fokus, kecuali jika elemen
yang berbeda dalam dialog memiliki atribut autofocus yang ditetapkan. Menetapkan atribut autofocus pada tombol tutup akan memastikan
tombol tersebut menerima fokus saat dialog dibuka. Namun, menyertakan autofocus dalam <dialog>
hanya boleh dilakukan dengan banyak pertimbangan. Semua elemen dalam urutan yang muncul sebelum elemen yang difokuskan otomatis akan dilewati.
Kita akan membahas atribut ini lebih lanjut di pelajaran fokus.
Antarmuka HTMLDialogElement menyertakan properti
returnValue. Mengirim formulir dengan method="dialog" akan menetapkan returnValue ke name, jika ada, dari tombol kirim yang digunakan untuk
mengirim formulir. Jika kita menulis <button type="submit" name="toasty">close</button>, returnValue akan menjadi toasty.
Saat dialog dibuka, atribut boolean open
akan ada, yang berarti dialog aktif dan dapat berinteraksi. Saat dialog dibuka dengan menambahkan atribut open, bukan
melalui .show() atau .showModal(), dialog akan menjadi tanpa modal. Properti HTMLDialogElement.open
menampilkan true atau false, bergantung pada apakah dialog tersedia untuk interaksi—bukan apakah dialog bersifat modal atau tidak.
Meskipun JavaScript adalah metode yang lebih disukai untuk membuka dialog, termasuk atribut open saat halaman dimuat, lalu menghapusnya
dengan .close(), dapat membantu memastikan dialog 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".
Setelan default CSS
Perhatikan bahwa browser menyediakan gaya default untuk dialog. Firefox, Chrome, dan Edge menetapkan color: CanvasText; background-color: Canvas;
dan Safari menetapkan color: black; background-color: white; dalam stylesheet agen penggunanya. color diwarisi
dari dialog, bukan dari body atau :root, yang mungkin tidak terduga. Properti background-color tidak diwariskan.
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang elemen dialog.
Bagaimana cara menata gaya area di belakang dialog?
::background.::backdrop.background.