แนวคิด:
•สร้างหน้ากากตั้งค่าลำดับการซ้อนของหน้ากากเพื่อให้แน่ใจว่าองค์ประกอบอื่น ๆ สามารถครอบคลุมได้
ตำแหน่ง: Absolute; Top: 0; ซ้าย: 0; Display: None; พื้นหลังสี: RGBA (9, 9, 9, 0.63); ความกว้าง: 100%; ความสูง: 100%; z-index: 1000; •ตั้งค่าสีพื้นหลังและรูปแบบการแสดงผลของเนื้อหาในความกว้างหน้ากาก: 50%; Text-Ag: Center; พื้นหลัง: #FFFFFF; Border-Radius: 6PX; มาร์จิ้น: 100px auto; Line-Height: 30px; Z-index: 10001; •เหตุการณ์ที่มีผลผูกพันสลับฟังก์ชั่นแอตทริบิวต์การแสดงผลแบบไดนามิก showmodel () ของหน้ากาก {document.getElementById ('mymodel'). style.display = 'block';} ฟังก์ชั่น closemodel () {document.getElementById ('MyModel')หมายเหตุ: หน้ากากควรอยู่ในตำแหน่งที่แน่นอนความกว้างและความสูงควรครอบครองทั้งหน้าและลำดับการซ้อนควรมีขนาดใหญ่
รหัสต้นฉบับ
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> หน้ากาก </title> <style> .container {width: 900px; margin: 50px auto; text- RGBA (9, 9, 9, 0.63); ความกว้าง: 100%; ความสูง: 100%; z-index: 1,000;}. โมเดล-เนื้อหา {ความกว้าง: 50%; text-allign: center; พื้นหลัง: #ffffff; border-radius: 6px; margin: 100px auto; onclick = "showmodel ()"> ป๊อปอัพหน้ากาก </pution> <div id = "mymodel" onclick = "closeModel ()"> <div> <p> สวัสดีฉันเป็นเนื้อหา ~~ </p> <p> <button id = "closemodel" onclick = "closemodel () {document.getElementById ('mymodel'). style.display = 'block';} ฟังก์ชั่น closemodel () {document.getElementById ('mymodel'). style.display = 'none';} </script>ข้างต้นเป็นรหัสการใช้งานอย่างง่ายของฟังก์ชั่น JavaScript Mask (Model) ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!