Penggayaan Modal dan Dialog

Elemen HTML <dialog> menyediakan tingkah laku modal terbina dalam: perangkap fokus, penutupan dengan Escape dan API showModal() / close(). Gayakannya dengan CSS dan bukannya membina rangka modal tersuai dari awal.

Elemen pseudo ::backdrop menggayakan lapisan tindanan di belakang <dialog> yang terbuka. Gunakan latar belakang separa lutsinar: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Tiada div pembalut diperlukan.

Pusatkan dialog dengan CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. Penggunaan margin: auto pada dialog meletakkannya di tengah ruang pandangan tanpa kedudukan oleh JS.

Tetapkan overflow-y: auto pada dialog itu sendiri untuk mengendalikan kandungan yang panjang. Tetapkan overflow: hidden pada body apabila modal dibuka bagi menghalang tatalan latar belakang — tambahkan dan buang kelas dengan JavaScript untuk menogol keadaan ini.

Animasikan kemunculan dialog menggunakan @starting-style (Chrome 117+) untuk animasi kemunculan menggunakan CSS sahaja tanpa JavaScript. Untuk sokongan yang lebih meluas, tambahkan kelas terbuka dengan JavaScript dan gunakan transition pada transform dan opacity: luncur naik daripada translateY(20px) kepada translateY(0).

Menganimasikan penutupan dialog agak rumit — dialog disembunyikan serta-merta apabila close() dipanggil. Penyelesaiannya ialah menggunakan API pop timbul, yang menyokong animasi penutupan secara asli, atau memintas penutupan dengan JavaScript, memainkan kelas animasi keluar, kemudian memanggil close() selepas animasi tamat.

Dialog yang dibuka dipaparkan di atas semua kandungan halaman lain. Elakkan konflik z-index dengan menggunakan konteks susunan asli elemen dialog — elemen ini dipaparkan dalam lapisan teratas, di atas semua nilai z-index CSS, tanpa memerlukan tetapan z-index pada dialog itu sendiri.

Pada peranti mudah alih, luncurkan dialog dari bawah seperti helaian: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. Pada desktop, pusatkannya sebagai modal tradisional menggunakan corak margin: auto.

Elemen dialog asli mengalihkan fokus secara automatik kepada elemen pertama yang boleh menerima fokus apabila dibuka. Pastikan susunan tab dalam dialog adalah logik. Tambahkan butang tutup yang mengembalikan fokus kepada elemen pencetus apabila dialog ditutup bagi memastikan aliran navigasi papan kekunci yang betul.

Tambahkan aria-labelledby yang menunjuk kepada tajuk dialog dan aria-describedby yang menunjuk kepada huraian dialog. Peranan dialog adalah tersirat untuk <dialog>. Pembaca skrin mengumumkan label ini apabila fokus memasuki dialog.

Dialog pengesahan memerlukan tajuk soalan yang jelas, huraian ringkas tentang kesan, butang tindakan yang merosakkan (merah dan dijajar ke kanan), serta butang batal (dijajar ke kiri atau sekunder). Gunakan autofocus pada butang batal supaya pilihan yang selamat menjadi interaksi papan kekunci lalai.

Elemen dialog asli bersama ::backdrop, pemusatan dengan margin: auto, kawalan limpahan, animasi CSS untuk kemunculan dan pengurusan fokus menyediakan corak modal dipacu CSS yang boleh diakses sepenuhnya. Susun atur helaian responsif pada peranti mudah alih dan atribut ARIA yang betul melengkapkan komponen dialog yang sedia untuk pengeluaran.