Kotak dialog (juga dikenal sebagai kotak modal dan lapisan mengambang) adalah bagian penting dari interaksi pengguna dalam proyek web. Yang paling umum kami gunakan adalah alert() dan konfirmasi() di js disesuaikan gayanya, jadi selama proses pengembangan, kami biasanya membuat roda sesuai dengan kebutuhan kami sendiri atau menggunakan roda pihak ketiga.
Komposisi kotak dialogBentuk umum kotak pop-up:
Posisi: Sudut kiri atas layar, sudut kanan atas, sudut kiri bawah, sudut kanan bawah, tengah vertikal, dll.
Ukuran: lebar tetap dan tinggi tetap, lebar tetap dan tinggi tetap, lebar variabel dan tinggi tetap, dll.
Bentuk dialog yang sedang dikembangkan adalah kasus kombinasi acak antara posisi dan ukuran.
Namun, ada satu situasi (pemusatan vertikal dengan lebar dan tinggi variabel) yang tidak mudah untuk diterapkan (Anda dapat menggunakan display:table atau terjemahan atau flex CSS3 untuk mencapainya). .
Kotak dialog di atas berisi wadah untuk konten, dan terdapat juga lapisan topeng (mask) di bawah kotak dialog. Lapisan topeng adalah lapisan pemisah antara kotak dialog dan badan halaman yang terbentuk setelah pengguna memicu kotak pop-up Keberadaannya Dapat memberikan efek perbedaan visual yang lebih jelas kepada pengguna, dan pada saat yang sama menghindari operasi utama halaman lain yang tidak perlu setelah pengguna memicu kotak dialog, sehingga menghasilkan pengalaman pengguna yang lebih baik.
ada masalahMeskipun ada banyak roda dialog yang dapat kita pilih, kita menghadapi berbagai masalah.
Jadi, adakah cara sederhana untuk membuat kotak dialog? Tentu saja kita bisa menggunakan elemen dialog HTML5.
HTML5(dialog)
<dialog terbuka> <h2>Halo dunia.</h2></dialog>
Ini sangat sederhana. Kita dapat menggunakan kode di atas untuk membuat kotak dialog yang muncul dengan konten 'Halo dunia'.
Juga mudah untuk mengontrol tampilan/penyembunyian kotak dialog. Tambahkan atribut terbuka untuk menampilkannya, dan menghapusnya untuk menyembunyikannya. Tentu saja, kita juga dapat mengontrol tampilan dan penyembunyian dialog melalui antarmuka DOM (show(), close())
Untuk layer mask di bawah kotak dialog, kita dapat menggunakan elemen semu ::backgrop, dan untuk mengaktifkannya kita perlu menggunakan API DOM showModal(). Ciri-ciri ::backgrop adalah posisinya di bawah dialog , di z -index mana pun di atas.
Menggunakan showModal() tidak hanya dapat menampilkan lapisan topeng, tetapi juga wadah dialog, jadi saat menggunakan ::backdrop, Anda dapat menggunakan showModal() alih-alih show() API; jika Anda menekan tombol ESC pada keyboard, maka lapisan pop-up akan ditutup. Tentu saja, Anda dapat menggunakan close() DOM API.
Kita bisa mengatur layer ::backdrop menjadi layer semi transparan, kodenya sebagai berikut:
dialog::latar belakang { warna latar belakang: rgba(0, 0, 0, 0.75);}
Selain lapisan pop-up yang umum kita gunakan dengan informasi cepat, ada juga lapisan pop-up dengan bentuk yang lebih umum digunakan.
Lapisan popup dengan bentukBisakah kita menggunakan elemen dialog HTML5 yang dikombinasikan dengan elemen form untuk membuat lapisan pop-up ini?
Jawaban: Ya
Bagaimana kita bisa menggabungkan elemen form dan elemen dialog secara erat?
Jawaban: Kita hanya perlu menambahkan atribut method=dialog pada elemen dialog, sehingga nilai nilai atribut elemen button dapat diteruskan ke elemen dialog.
<dialog> <form method=dialog> <p>Konfirmasi atau Batal</p> <button type=submit value=yes>Konfirmasi</button> <button type=submit value=no>Batal</button> </form ></dialog><skrip> var dialog = document.querySelector('dialog') dialog.showModal() dialog.addEventListener('close', function(event) { console.log(dialog.returnValue) })</script>
demo
Kompatibilitas perambanMeskipun ini adalah HTML5 yang relatif mudah digunakan, masih ada masalah kompatibilitas. Chrome dan Opera mendukungnya dengan lebih baik. Ini adalah fitur eksperimental di Firefox, tetapi IE, Edge, dan Safari tidak mendukungnya dengan baik itu, dan Android juga mendukungnya tidak cukup baik dan hanya didukung oleh Android 6 dan yang lebih baru. Untuk detailnya, silakan merujuk ke caniuse
Jadi, bisakah browser versi lama mendukung dialog HTML5? Pertama-tama, yang kami pikirkan adalah apakah ada polyfill yang mendukung dialog, seperti babel-polyfill yang mendukung fitur-fitur baru es6. Memang ada proyek open source a11y-dialog, yang menyediakan versi berbeda dari vue and bereaksi masing-masing.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.