Dialog

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 Anda perlu harus dilakukan 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 bisa berinteraksi) atau non-modal (masih memungkinkan untuk berinteraksi dengan konten di luar dialog). Dialog modal ditampilkan di atas konten halaman lainnya. Sisanya halaman adalah inert dan, secara default, terhalang 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 <dialog> modal. 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 HTMLDialogElement.showModal() , ini adalah dialog modal. Membuka dialog modal akan menonaktifkan dan mengaburkan semua hal selain dialog itu sendiri. Jika Anda arahkan kursor ke UI di luar dialog, Anda akan melihat semua elemen berperilaku seolah-olah pointer-events: none; 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. Segala sesuatu di luar dialog modal tidak akan aktif selama dialog terbuka.

Bila dialog ditutup, modal atau tidak, fokus akan dikembalikan ke elemen yang membuka dialog. Jika Anda secara terprogram membuka dialog yang tidak didasarkan pada tindakan pengguna, pertimbangkan kembali. Jika perlu, pastikan fokus berada kembali ke tempatnya sebelum dialog terbuka, 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(), inersia atau penonaktifan akan gratis; atribut tidak secara eksplisit diatur.

Tampilan latar yang mengaburkan semua selain dialog dapat ditata menggunakan ::backdrop elemen semu. Tampilan latar hanya ditampilkan saat <dialog> ditampilkan dengan metode .showModal(). Elemen semu 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 inert. 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 secara resmi tidak diperlukan oleh spesifikasi, pertimbangkan hal tersebut sesuai kebutuhan. 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 dalam dialog memiliki atribut autofocus yang disetel. Menyetel atribut autofocus pada tombol tutup akan memastikan ia menerima fokus saat dialog dibuka. Namun, menyertakan autofocus dalam <dialog> sebaiknya hanya 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 menyetel returnValue ke name, jika ada, dari tombol kirim yang digunakan untuk kirimkan formulir. Jika kita menulis <button type="submit" name="toasty">close</button>, returnValue akan menjadi toasty.

Saat dialog dibuka, atribut boolean open ada, berarti dialog sedang 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 disarankan untuk membuka dialog, termasuk atribut open saat pemuatan halaman, lalu menghapus dengan .close(), dapat membantu memastikan dialog tersedia bahkan saat JavaScript tidak ada.

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 dialog itu sendiri.

Peran ARIA

Peran implisitnya adalah dialog. Jika dialog adalah jendela konfirmasi yang mengomunikasikan pesan penting yang memerlukan konfirmasi atau respons pengguna lainnya, setel role="alertdialog". Dialog juga harus memiliki nama yang dapat diakses. Jika teks yang terlihat dapat menyediakan nama aksesibilitas, tambahkan aria-labelledby="idOfLabelingText".

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 diwarisi.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang elemen dialog.