Artikel ini memperkenalkan contoh penggunaan HTML5 dan CSS3 untuk membuat kotak modal dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:
Contoh kode sumberMungkin Anda tidak ingin membaca instruksi panjang lebar di bawah ini, dan ingin melihat langsung kode sumber atau contoh online. Tautan di bawah ini adalah kotak modal fungsional yang saya buat menggunakan transisi CSS3, opacity, pointer-event dan atribut lainnya.
Anda dapat mengkliknya untuk membuka Github untuk melihat kode sumber: ModalBox-Tutorial
struktur HTMLKomponen front-end didorong oleh skenario bisnis dan interaksi, dan kotak modal tidak terkecuali. Skenario umum adalah melakukan operasi, seperti mengklik tombol, lalu menampilkan kotak modal untuk memberikan umpan balik kepada pengguna atau memandu pengguna. untuk melakukan interaksi bawah. Interaksi kotak modal dapat mencakup 5 langkah:
1. Ada tombol atau link yang diklik pengguna untuk memicu tampilan kotak modal;
2. Saat kotak modal ditampilkan, akan ada lapisan topeng transparan yang memblokir seluruh area pandang saat ini;
3. Isi kotak modal akan muncul pada posisi tertentu (biasanya di tengah) viewport dengan warna tidak transparan (biasanya putih);
4. Isi kotak modal (biasanya di pojok kanan atas) akan memiliki tanda tutup. Mengkliknya akan menyembunyikan kotak modal;
5. Isi kotak modal harus ditentukan berdasarkan skenario bisnis aktual, sehingga dapat berupa struktur apa pun.
gaya
1. .modalbox awalnya disembunyikan;
1. .modalbox adalah lapisan topeng transparan;
2. .modalbox-dialog adalah lapisan konten yang tidak transparan;
3. Setelah mengklik link show modal box, .modalbox akan ditampilkan;
4. Setelah mengklik .modalbox-close-btn, .modalbox akan disembunyikan;
Contoh efek
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.