คำแถลง
การอ่านบทความนี้ต้องใช้ HTML, CSS และ JavaScript พื้นฐานบางอย่าง
ออกแบบ
ความคิดในการบรรลุเอฟเฟกต์เลเยอร์ป๊อปอัพนั้นง่ายมาก: ซ่อนเนื้อหาที่จะแสดงก่อนและแสดงเนื้อหาที่ซ่อนอยู่เดิมหลังจากทริกเกอร์เงื่อนไขที่แน่นอน (เช่นคลิกปุ่ม)
ทำให้สำเร็จ
<! doctype html> <html> <head> <title> วัตถุหน้าต่าง </title> <meta charset = "utf-8"> </head> <body> <a href = "http://www.baidu.com> baidu </a> Lightblue; Border: 1px Solid Green; " id = "toast"> <!-ตั้งค่าแอตทริบิวต์การแสดงผลเป็นไม่มีเพื่อซ่อนเนื้อหา-> <p> นี่คือเนื้อหาเลเยอร์ป๊อปอัพ </p> <button type = "ปุ่ม" id = "ปิด"> ปิดเลเยอร์ป๊อปอัพ </dive> </div> <script type = "JavaScript" document.getElementById ("เปิด"). onclick = function (e) {<!-กำหนดเหตุการณ์คลิกเพื่อแสดงเนื้อหาที่ซ่อนอยู่-> toast.style.display = "block"; toast.style.position = "แก้ไข"; 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 ("ปิด"). onclick = function (e) {<!-ซ่อนเนื้อหาที่แสดงอีกครั้ง-> toast.style.display = "ไม่มี"; } </script> </body> </html>เอฟเฟกต์การแสดงผลมีดังนี้:
แต่เราสามารถสังเกตได้ว่าหลังจากเนื้อหาที่ซ่อนอยู่จะปรากฏขึ้นเรายังสามารถเข้าสู่หน้า Baidu ผ่านลิงค์ได้ เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้นเราสามารถจัดเตรียมเลเยอร์หน้ากากเพื่อครอบคลุมเนื้อหาหน้าดั้งเดิมทั้งหมด รหัสมีดังนี้:
<! doctype html> <html> <head> <dite> วัตถุหน้าต่าง </title> <meta charset = "utf-8"> </head> <body> <a href = "http://www.baidu.com> baidu </a> ไม่มี; ตำแหน่ง: คงที่; ความกว้าง: 100%; ความสูง: 100%; ด้านบน: 0px; ซ้าย: 0px; พื้นหลัง: สีเทา, "> <!-ปกปิดพื้นหลังผ่านชั้นหน้ากาก-> <div style =" พื้นหลัง: lightblue; border: 1px green; " id = "toast"> <!-ตั้งค่าแอตทริบิวต์การแสดงผลเป็นไม่มีเพื่อซ่อนเนื้อหา-> <p> นี่คือเนื้อหาเลเยอร์ป๊อปอัพ </p> <button type = "ปุ่ม" id = "ปิด"> ปิดเลเยอร์ป๊อปอัพ </button> </div> </div> <script type = "text/javascript" var cover = document.getElementById ("cover"); document.getElementById ("เปิด"). onclick = function (e) {<!-กำหนดเหตุการณ์คลิกเพื่อแสดงเนื้อหาที่ซ่อนอยู่-> cover.style.display = "block"; toast.style.position = "แก้ไข"; 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 ("ปิด"). onclick = function (e) {<!-ซ่อนเนื้อหาที่แสดงอีกครั้ง-> cover.style.display = "ไม่มี"; } </script> </body> </html>นี่คือผลการทดสอบต่อไปนี้อีกครั้งดังที่แสดงในรูปด้านล่าง:
สรุป
เนื้อหาข้างต้นใช้เอฟเฟกต์เลเยอร์ป๊อปอัพ แต่ด้วยการเพิ่มรหัสเพิ่มเติมฟังก์ชั่นที่ซับซ้อนมากขึ้นสามารถนำไปใช้กับพื้นฐานนี้ได้
ตัวอย่างง่ายๆข้างต้นของการใช้ JavaScript เพื่อให้ได้เอฟเฟกต์เลเยอร์ป๊อปอัพคือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น