penyataan
Membaca artikel ini membutuhkan HTML dasar, CSS, dan JavaScript tertentu
desain
Gagasan untuk mencapai efek lapisan pop-up sangat sederhana: sembunyikan konten yang akan ditampilkan terlebih dahulu, dan menampilkan konten yang awalnya tersembunyi setelah memicu kondisi tertentu (seperti mengklik tombol).
menyelesaikan
<! Doctype html> <html> <head> <title> objek jendela </iteme> <meta charset = "utf-8"> </head> <tody> <a href = "http://www.baidu.com"> lay-up </a> <button type = "kancing" id = "buka; LightBlue; Border: 1px Solid Green; " id = "toast"> <!-Atur atribut tampilan ke tidak ada untuk menyembunyikan konten-> <p> Ini adalah konten layer pop-up </p> <tombol type = "tombol" id = "tutup"> Tutup lapisan pop-up </button> </div> <script type = "text/javascript"> var toast = document.getElementByid ("Toast"); document.geteLementById ("buka"). onclick = function (e) {<!-Tentukan acara klik untuk menampilkan konten tersembunyi-> toast.style.display = "block"; toast.style.position = "tetap"; var winwidth = window.innerwidth; var winheight = window.innerheight; var targetWidth = toast.offsetWidth; var targetHeight = toast.offsetHeight; toast.style.top = (WinHeight - TargetHeight) / 2 + "px"; toast.style.left = (winwidth - targetwidth) / 2 + "px"; } document.getElementById ("tutup"). onclick = function (e) {<!-Sembunyikan konten yang ditampilkan lagi-> toast.style.display = "none"; } </script> </body> </html>Efek tampilan adalah sebagai berikut:
Tetapi kita dapat melihat bahwa setelah konten tersembunyi muncul, kita masih bisa memasukkan halaman Baidu melalui tautan. Untuk mencegah hal ini terjadi, kami dapat menyediakan lapisan topeng untuk menutup semua konten halaman asli. Kodenya adalah sebagai berikut:
<! Doctype html> <html> <head> <title> objek jendela </itement> <meta charset = "utf-8"> </head> <tody> <a href = "http://www.baidu.com"> BAIDU </a> <kancing tipe = "kancing" id = "buka"> buka pop-up = layer = "tutute> <kancing tipe =" kancing "id =" buka "> buka pop-up = pop-up = Layer </a> <kancing tipe =" kancing "id =" buka "> buka pop-up = lay =" </a> <kancing tipe = "kancing" id = "buka"> buka pop-up pop-up; diperbaiki; lebar: 100%; tinggi: 100%; atas: 0px; kiri: 0px; latar belakang: abu-abu; "> <!-Topeng latar belakang melalui lapisan topeng-> <div style =" latar belakang: lightblue; perbatasan: 1px solid green; " ID = "Toast"> <!-Setel Atribut Display ke Tidak Ada untuk Menyembunyikan Konten-> <p> Berikut adalah konten layer pop-up </p> <tombol type = "tombol" id = "tutup"> Tutup lapisan pop-up </button> </diver> </div> <script type = "text/javascript"> var Toast = document.getelementByid ("Toast"); var cover = document.geteLementById ("cover"); document.geteLementById ("buka"). onclick = function (e) {<!-Tentukan acara klik untuk menampilkan konten tersembunyi-> cover.style.display = "block"; toast.style.position = "tetap"; var winwidth = window.innerwidth; var winheight = window.innerheight; var targetWidth = toast.offsetWidth; var targetHeight = toast.offsetHeight; toast.style.top = (WinHeight - TargetHeight) / 2 + "px"; toast.style.left = (winwidth - targetwidth) / 2 + "px"; } document.getElementById ("tutup"). onclick = function (e) {<!-Sembunyikan konten yang ditampilkan lagi-> cover.style.display = "none"; } </script> </body> </html>Ini adalah hasil tes berikut lagi, seperti yang ditunjukkan pada gambar di bawah ini:
Meringkaskan
Konten di atas hanya mengimplementasikan efek lapisan pop-up, tetapi dengan menambahkan lebih banyak kode, fungsi yang lebih kompleks dapat diimplementasikan atas dasar ini.
Contoh sederhana di atas menggunakan JavaScript untuk mencapai efek lapisan pop-up adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.