Dialog

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 pada halaman web: pop-up yang menyela pengguna untuk fokus pada dirinya sendiri. Ada beberapa kasus penggunaan yang valid untuk memunculkan 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 dilengkapi dengan semantik, interaksi keyboard, serta semua properti dan metode antarmuka HTMLDialogElement.

Dialog modal

Berikut adalah contoh modal <dialog>. Membuka dialog yang berisi "Buka dialog modal" tombol. Setelah dibuka, ada tiga cara untuk menutup dialog: tombol escape, mengirimkan formulir dengan tombol yang memiliki formmethod="dialog" tetapkan (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 bisa mendapatkan fokus saat dialog modal terbuka. Semua yang ada di luar dialog modal tidak aktif selama dialog terbuka.

Bila dialog ditutup, modal atau tidak, fokus akan dikembalikan ke elemen yang membuka dialog. Jika Anda membuka dialog secara terprogram tanpa didasarkan pada tindakan pengguna, pertimbangkan kembali. Jika perlu, pastikan fokus berada kembali ke tempatnya 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 elemen aktif dialog. Saat dialog modal dibuka menggunakan showModal(), inertness atau penonaktifan akan otomatis terjadi; atribut tidak disetel secara eksplisit.

Latar belakang yang mengaburkan semua hal selain dialog dapat diberi gaya menggunakan elemen pseudo ::backdrop. Tampilan latar 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, lebih penting lagi untuk memastikan bahwa Anda menyertakan suatu metode untuk menutup dialog non-modal. Dengan demikian, jika yang lebih dekat berada di luar dialog, menyadari bahwa fokus akan mengarah 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 diperlukan. Tombol escape akan menutup dialog modal, namun bukan dialog non-modal. Tombol yang terlihat dan dapat menerima fokus akan meningkatkan aksesibilitas dan {i>user experience<i}.

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 menyetel method="dialog" pada <form> atau formmethod="dialog" pada tombol.

Saat pengguna mengirim melalui metode dialog, status data yang dimasukkan pengguna dipertahankan. Saat ada peristiwa kirim— formulir melewati 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 ditetapkan pada <button> penutupan dalam contoh ini. Elemen dengan atribut autofocus yang ditetapkan dalam <dialog> tidak akan menerima berfokus pada pemuatan halaman (kecuali jika halaman dimuat dengan dialog yang terlihat). Namun, aplikasi tersebut 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. Menyetel atribut autofocus pada tombol tutup akan memastikan ia menerima fokus saat dialog dibuka. Namun, menyertakan autofocus dalam <dialog> hanya boleh dilakukan dengan banyak pertimbangan. Semua elemen dalam urutan yang berada sebelum elemen yang difokuskan otomatis dilewati. Kita akan membahas atribut ini lebih lanjut dalam pelajaran fokus.

Antarmuka HTMLDialogElement menyertakan returnValue saat ini. 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 ada, yang berarti dialog aktif dan dapat berinteraksi. Saat dialog dibuka dengan menambahkan atribut open, bukan daripada melalui .show() atau .showModal(), dialog akan menjadi tanpa modal. HTMLDialogElement.open menampilkan true atau false, bergantung pada apakah dialog tersedia untuk interaksi, bukan apakah dialog tersebut modal atau bukan.

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 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 menyediakan nama aksesibilitas, tambahkan aria-labelledby="idOfLabelingText".

Setelan default CSS

Perhatikan bahwa browser menyediakan gaya visual default untuk dialog. Firefox, Chrome, dan Edge menyetel color: CanvasText; background-color: Canvas; dan Safari menetapkan color: black; background-color: white; di stylesheet agen penggunanya. color diwariskan dari dialog dan bukan dari body atau :root, yang mungkin tidak terduga. Properti background-color tidak diwariskan.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang elemen dialog.