Ide:
• Buat topeng, atur urutan penumpukan topeng untuk memastikan bahwa elemen lain dapat ditutupi
Posisi: Absolute; Top: 0; Kiri: 0; Tampilan: Tidak Ada; Latar Belakang-Color: RGBA (9, 9, 9, 0.63); Lebar: 100%; Tinggi: 100%; Z-indeks: 1000; • Atur warna latar belakang dan format tampilan konten dalam lebar mask: 50%; teks-align: tengah; latar belakang: #ffffff; perbatasan-radius: 6px; margin: 100px otomatis; garis-line-height: 30px; z-index: 10001; • Event yang mengikat, secara dinamis beralih fungsi atribut tampilan showModel () dari mask {document.getElementById ('mymodel'). Style.display = 'block';} function closeModel () {document.geteLementById ('mymodel'). Style.display = 'none';}Catatan: Topeng harus benar -benar diposisikan, lebar dan tinggi harus menempati seluruh halaman, dan urutan susun harus besar.
Kode Sumber
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <itement> mask </title> <tyle> .container {width: 900px; margin: 50px auto; Text-align: center;}#mymodel {posisi: 0; rgba(9, 9, 9, 0.63);width: 100%;height: 100%;z-index: 1000;}.model-content {width: 50%;text-align: center;background: #ffffff;border-radius: 6px;margin: 100px auto;line-height: 30px;z-index: 10001;}</style></head><body><div><button onclick="showModel()">Pop up mask</button><div id="myModel" onclick="closeModel()"><div><p>Hello, I'm the content~~</p><p><button id="closeModel" onclick="closeModel()">Close</button></p></div></div><script>function showModel() {document.geteLementById ('mymodel'). style.display = 'block';} function closeModel () {document.geteLementById ('mymodel'). style.display = 'none';} </script> </body> </html>Di atas adalah kode implementasi sederhana dari fungsi JavaScript (model) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!