Prompt dan konteks
Konsol pentadbir memerlukan pengesahan tindakan pemusnahan dan borang sebab. Sesetengah aliran mesti ditutup hanya melalui tindakan eksplisit; yang lain boleh ditutup dengan Escape atau klik luar. Reka dasar penutupan elemen dialog natif untuk laluan papan kekunci, sentuhan dan pengesahan.
MDN mentakrifkan nilai closedby iaitu none, closerequest, dan any: mekanisme pembangun sahaja, permintaan penutupan platform ditambah mekanisme pembangun, atau ketiga-tiga mekanisme. Dialog modal menggunakan showModal(); dialog bukan modal menggunakan show().
Perkara yang diuji oleh penemu duga
Calon harus memetakan risiko perniagaan kepada dasar penutupan, membezakan dialog modal daripada popover, dan menerangkan Escape, light dismiss, close(), requestClose(), method="dialog", fokus awal, pemulihan fokus dan pengesahan borang.
Soalan penjelasan untuk ditanya terlebih dahulu
- Bolehkah pengesahan pemusnahan ditutup secara tidak sengaja, dan adakah input yang belum disimpan mesti dikekalkan?
- Adakah Escape atau klik luar bersamaan dengan batal, atau adakah ia memerlukan pengesahan lain?
- Patutkah butang batal memintas pengesahan medan wajib?
- Adakah pelayar yang tidak disokong mesti menyediakan tingkah laku penutupan yang serupa?
- Ke manakah fokus harus kembali apabila dialog ditutup?
Rangka jawapan 30 saat
"Untuk tindakan pemusnahan saya menggunakan showModal() dengan closedby="closerequest", atau none untuk pengesahan paling ketat, berserta butang batal dan sahkan yang eksplisit. Panel maklumat berisiko rendah boleh menggunakan any atau popover="auto". Borang dengan method="dialog" mengembalikan nilai; butang batal boleh menggunakan formnovalidate apabila ia mesti memintas pengesahan. Saya menetapkan fokus awal yang disengajakan dan memulihkan fokus kepada pencetus. Pengesanan keupayaan menyediakan sandaran butang eksplisit dan papan kekunci manual."
Huraian mendalam langkah demi langkah
Langkah 1: Pilih modal atau bukan modal
showModal() menjadikan seluruh dokumen lain lengai (inert) dan sesuai untuk pengesahan pemusnahan atau kerja wajib. show() membiarkan halaman kekal interaktif untuk panel bantuan. Menogol atribut open sahaja tidak mewujudkan semantik fokus modal dan latar belakang.
Langkah 2: Petakan risiko kepada closedby
closedby="none" hanya membenarkan penutupan yang ditakrifkan oleh pembangun dan sesuai untuk pengesahan yang tidak boleh ditarik balik. closerequest juga menerima Escape atau permintaan penutupan platform. any menambah penutupan mudah (light dismiss) klik luar dan sesuai untuk maklumat berisiko rendah.
<dialog id="delete-dialog" closedby="closerequest">
<form method="dialog">
<button value="cancel">Cancel</button>
<button value="confirm">Delete</button>
</form>
</dialog>Langkah 3: Kendalikan Escape, request-close dan close
Escape atau gerak isyarat platform ialah permintaan penutupan. requestClose() boleh menjalankan laluan permintaan tutup supaya aplikasi boleh mengesahkan atau memintasnya. close() ditutup secara langsung dan boleh menetapkan returnValue. Jangan sekali-kali mentafsirkan Escape sebagai pemadaman yang disahkan.
Langkah 4: Urus dan pulihkan fokus
Apabila modal dibuka, fokuskan input terbaik, butang batal atau tajuk; jangan letakkan tabindex pada elemen dialog. Semasa ditutup, kembalikan fokus kepada pencetus, atau kepada pengganti yang stabil jika pencetus telah dialih keluar.
Langkah 5: Gunakan form method=dialog secara sengaja
method="dialog" menutup dialog dan mengekalkan keadaan kawalan borang tanpa menghantar permintaan rangkaian; value butang menjadi returnValue. Jika pembatalan mesti memintas pengesahan wajib, gunakan formnovalidate atau close() eksplisit supaya pengguna tidak terperangkap.
Langkah 6: Bezakan dialog daripada Popover
Popover adalah bukan modal dan berada dalam lapisan atas (top layer). popover="auto" menyokong light dismiss; manual kekal terbuka sehingga disembunyikan secara eksplisit dan membenarkan beberapa popover bebas. Jangan gunakan popover di mana kelengaian (inertness) modal diperlukan.
Langkah 7: Kesan sokongan dan sediakan sandaran (fallback)
Semak sokongan HTMLDialogElement, showModal dan closedby. Tanpa sokongan ini, sediakan kawalan eksplisit, pengendalian Escape manual, pengurusan fokus dan penyekatan latar belakang. Sandaran mesti mengekalkan kontrak batal dan sahkan yang sama.
Langkah 8: Uji penutupan dan kebolehcapaian
Uji Tab, Escape, klik luar, sentuhan, pengesahan yang gagal, pembukaan berulang, berbilang modal, gerak isyarat kembali dan pelayar lama. Rekod sebab penutupan (confirm, cancel, escape, light-dismiss) dan gunakan pembaca skrin untuk mengesahkan penamaan, keadaan dan pergerakan fokus.
Contoh jawapan berkualiti tinggi
"Pengesahan pemusnahan menggunakan showModal() dan closedby="closerequest"; aliran paling ketat menggunakan none dengan butang batal eksplisit. Maklumat berisiko rendah boleh menggunakan any atau popover="auto". method="dialog" mengembalikan hasil, dan batal boleh memintas pengesahan jika sesuai. Saya menetapkan fokus awal, memulihkan fokus pencetus, mengesan sokongan dan kembali kepada kawalan eksplisit serta pengendalian papan kekunci/fokus manual. Ujian merangkumi setiap sumber penutupan dan teknologi bantuan."
Kesilapan biasa
- Menggunakan any untuk setiap dialog → tindakan pemusnahan ditutup secara tidak sengaja → petakan closedby kepada risiko.
- Menambah tabindex pada dialog → semantik fokus menjadi salah → fokuskan kawalan dalaman atau tajuk.
- Memperlakukan close seperti requestClose → logik pengesahan dilangkau → bezakan penutupan yang diminta dan penutupan langsung.
- Menjadikan butang batal borang wajib gagal pengesahan → pengguna terperangkap → gunakan formnovalidate atau close.
- Menggantikan modal dengan popover → latar belakang kekal interaktif → gunakan showModal apabila kelengaian (inertness) penting.
- Hanya menguji dengan tetikus → pengguna papan kekunci dan sentuhan tidak boleh keluar → rangkumi Escape, Tab, klik luar dan pembaca skrin.
Soalan susulan dan respons mantap
Soalan susulan 1: Apakah perbezaan teras antara closerequest dan none?
closerequest menerima Escape atau permintaan penutupan platform selain kawalan pembangun; none hanya menerima kawalan pembangun dan sesuai untuk tindakan yang tidak boleh ditarik balik.
Soalan susulan 2: Mengapakah showModal lebih boleh dipercayai berbanding open?
Ia mewujudkan keadaan modal, kelengaian latar belakang (background inertness) dan tingkah laku fokus pelayar. Menetapkan open sahaja hanya menghasilkan dialog bukan modal.
Soalan susulan 3: Apakah returnValue selepas Escape?
Escape tidak mewakili nilai butang hantar melainkan aplikasi menetapkannya. Rekod sebab penutupan secara berasingan sebagai escape atau request-close.
Soalan susulan 4: Bagaimanakah pembatalan boleh memintas pengesahan wajib?
Letakkan formnovalidate pada kawalan batal atau panggil close("cancel"); kekalkan pengesahan biasa pada sahkan.
Soalan susulan 5: Apakah sandaran untuk pelayar lama?
Sediakan kawalan buka/tutup yang eksplisit dan urus Escape, pemerangkapan fokus (focus trapping), penyekatan latar belakang dan sebab penutupan secara manual. Kekalkan ujian kontrak yang sama apabila sokongan natif dipulihkan.