Dialog

Elemen dialog adalah elemen yang berguna untuk merepresentasikan semua jenis dialog di HTML, cari tahu cara kerjanya.

Dialog modal adalah jenis kotak pop-up khusus di halaman web, yang mengganggu pengguna untuk berfokus 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 (konten di luar dialog masih dapat berinteraksi). Dialog modal ditampilkan di atas konten halaman lainnya. Bagian halaman lainnya tidak aktif dan, secara default, terhalang oleh latar belakang semi-transparan.

Elemen HTML semantik <dialog> 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 "Open modal dialog". Setelah dibuka, ada tiga cara untuk menutup dialog: tombol escape, mengirimkan formulir dengan tombol yang memiliki formmethod="dialog" yang ditetapkan (atau jika formulir itu sendiri memiliki method="dialog" yang ditetapkan), 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 dengan metode HTMLDialogElement.showModal(), <dialog> ini adalah dialog modal. Membuka dialog modal akan menonaktifkan dan mengaburkan semua hal selain dialog itu sendiri. Jika Anda mengarahkan kursor ke UI di luar dialog, Anda akan melihat bahwa semua elemen berperilaku seolah-olah pointer-events: none; disetel; bahkan tombol yang membuka dialog tidak bereaksi terhadap interaksi.

Saat dialog dibuka, fokus akan berpindah ke dalam dialog. Fokus ditetapkan pada elemen pertama dalam urutan navigasi keyboard berurutan dalam dialog tersebut. Jika Anda menekan tombol tab berulang kali, hanya konten dalam dialog yang dapat difokuskan 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. Hindari pembukaan dialog secara terprogram tanpa tindakan pengguna. Jika Anda harus melakukannya, pastikan fokus dikembalikan 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, kecuali dialog aktif. Saat dialog modal dibuka menggunakan showModal(), kelembaman atau penonaktifan akan disertakan; atribut tidak ditetapkan secara eksplisit.

Latar belakang yang menutupi semua hal selain dialog dapat diberi gaya menggunakan pseudo-elemen ::backdrop. Latar belakang hanya ditampilkan saat <dialog> ditampilkan dengan metode .showModal(). Elemen semu ini cocok dengan semua latar belakang, 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 membuka dialog, tetapi tanpa menambahkan latar belakang atau menyebabkan apa pun menjadi tidak aktif. Tombol escape tidak menutup dialog non-modal. Oleh karena itu, lebih penting lagi 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 tombol yang wajib ada. Tombol escape akan menutup dialog modal, tetapi tidak untuk 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 menyetel method="dialog" pada <form> atau formmethod="dialog" pada tombol.

Saat pengguna mengirimkan dengan metode dialog, status data yang dimasukkan pengguna akan dipertahankan. Meskipun ada peristiwa pengiriman—formulir menjalani validasi batasan (kecuali jika novalidate ditetapkan)—data pengguna tidak dihapus maupun dikirimkan. 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 penutup <button> 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, tombol 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 lain dalam dialog memiliki setelan atribut autofocus. Menetapkan atribut autofocus pada tombol tutup memastikan tombol tersebut menerima fokus saat dialog dibuka. Namun, menyertakan autofocus dalam <dialog> hanya boleh dilakukan dengan pertimbangan yang matang. Semua elemen dalam urutan yang muncul sebelum elemen yang difokuskan otomatis akan dilewati. Kami membahas atribut ini lebih lanjut dalam pelajaran fokus.

Antarmuka HTMLDialogElement mencakup properti returnValue. Mengirimkan formulir dengan method="dialog" akan menyetel returnValue ke name, jika ada, dari tombol kirim yang digunakan untuk mengirimkan formulir. Jika kita menulis <button type="submit" name="toasty">close</button>, maka returnValue akan menjadi toasty.

Saat dialog dibuka, atribut boolean open ada, yang berarti dialog aktif dan dapat berinteraksi. Jika dialog dibuka dengan menambahkan atribut open, bukan dengan .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 tersebut modal atau tidak.

Meskipun JavaScript adalah metode pilihan untuk membuka dialog, termasuk atribut open saat halaman dimuat, lalu menghapusnya dengan .close(), dapat membantu memastikan dialog tersedia meskipun 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 bersifat interaktif. Elemen <dialog> tidak interaktif dan tidak menerima fokus. Jangan menambahkan 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 diwarisi.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang elemen dialog.