Dialog modal adalah jenis kotak pop-up khusus yang mengganggu pengguna di halaman web. Meskipun ada beberapa kasus penggunaan yang valid untuk memunculkan dialog, Anda harus mempertimbangkan dengan cermat sebelum menambahkannya. Dialog modal memaksa pengguna untuk berfokus pada konten tertentu dan mengabaikan bagian halaman lainnya untuk sementara.
Dialog dapat berupa:
- Modal: Pengguna hanya dapat berinteraksi dengan konten dalam dialog. Dialog modal ditampilkan di atas konten halaman. Halaman disetel ke inert dan, secara default, dikaburkan oleh latar belakang semi-transparan.
- Non-modal: Pengguna dapat berinteraksi dengan konten di luar dialog.
Elemen <dialog>
HTML semantik untuk membuat dialog dilengkapi dengan semantik, interaksi keyboard, serta
semua properti dan metode antarmuka
HTMLDialogElement.
Dialog modal
Lihat contoh modal <dialog>. Klik 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. Saat Anda mengarahkan kursor ke UI di luar
dialog, semua elemen akan berperilaku seolah-olah
pointer-events: none;
telah ditetapkan. Bahkan tombol yang membuka dialog tidak akan 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 Anda menekan tombol tab berulang kali, hanya konten dalam dialog yang dapat
difokuskan saat modal terbuka. Semua yang ada di luar modal tetap tidak aktif.
Saat dialog ditutup, baik modal maupun non-modal, fokus akan dikembalikan ke elemen yang membuka dialog. Hindari membuka dialog secara terprogram tanpa tindakan pengguna. Jika harus, pastikan Anda mengembalikan fokus 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
dialog aktif. Saat dialog modal dibuka menggunakan showModal(), kelembaman atau penonaktifan terjadi secara default. Atribut tidak ditetapkan secara eksplisit.
Latar belakang yang mengaburkan semua hal selain dialog dapat diberi gaya menggunakan
elemen semu
::backdrop. Backdrop 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 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
backdrop atau menyebabkan apa pun menjadi inert. Tombol escape hanya menutup dialog
modal, bukan dialog non-modal. Oleh karena itu, menyertakan metode untuk menutup dialog non-modal menjadi lebih penting. Jika opsi tutup berada di luar
dialog, fokus akan kembali ke elemen yang membuka dialog. Ini
bukan pengalaman pengguna yang ideal.
Meskipun tombol untuk menutup dialog tidak diwajibkan secara resmi oleh spesifikasi, anggaplah tombol tersebut wajib ada. Tombol yang terlihat dan dapat menerima fokus 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" 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 akan melalui validasi batasan (kecuali jika novalidate ditetapkan). Data pengguna tidak dihapus atau dikirimkan. Anda dapat membuat tombol tutup tanpa JavaScript:
<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> hanya menerima fokus saat pemuatan halaman jika halaman sudah dimuat dengan dialog yang terlihat. Jika halaman tidak dimuat, elemen ini
akan menerima fokus saat dialog dibuka.
Saat dialog dibuka, elemen pertama yang dapat difokuskan dalam dialog akan menerima
fokus, kecuali jika elemen lain 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 dalam modul fokus.
Antarmuka HTMLDialogElement
mencakup properti
returnValue. Mengirimkan formulir dengan method="dialog" akan menetapkan returnValue ke
name, jika ada, dari tombol kirim yang digunakan untuk mengirimkan 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 dengan
.show() atau .showModal(), dialog tersebut tidak memiliki 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 yang lebih disukai untuk membuka dialog, menyertakan
atribut open saat pemuatan halaman, 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 implisitnya adalah dialog.
Jika dialog adalah jendela konfirmasi yang menyampaikan pesan yang
memerlukan respons atau konfirmasi pengguna, tetapkan
role="alertdialog".
Sertakan label aksesibilitas untuk dialog. Jika teks yang terlihat dapat memberikan
label aksesibilitas, tambahkan aria-labelledby="idOfLabelingText".
Default CSS
Browser menyediakan gaya visual default untuk dialog. Firefox, Chrome, dan
Edge menetapkan color: CanvasText; dan background-color: Canvas;. Safari menetapkan
color: black; background-color: white; di stylesheet agen pengguna mereka.
color diwarisi dari dialog, bukan body atau :root, yang mungkin
tidak terduga. Properti background-color tidak diwariskan.
Uji pemahaman Anda
Uji pengetahuan Anda tentang elemen dialog.
Bagaimana cara menata gaya area di belakang dialog?
::background.::backdrop.background.