บทความนี้อธิบายวิธีการใช้เลเยอร์ป๊อปอัพที่ครอบคลุมทั้งหน้าโดย JS และ CSS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
รูปแบบและโครงสร้างทั่วไปสำหรับพื้นหลังโปร่งใสกรอบบนชั้นป๊อปอัพมีดังนี้:
การคัดลอกรหัสมีดังนี้: .alertMessageBg {
ตำแหน่ง: แก้ไข;
_position: สัมบูรณ์;
ความกว้าง: 100%;
ความสูง: 100%;
ซ้าย: 0;
ด้านบน: 0;
ความเป็นมา:#000;
ความทึบ: 0.5;
-moz-opacity: 0.5;
ตัวกรอง: อัลฟ่า (ความทึบ = 50);
z-index: 97;
แสดง: ไม่มี;
-
.AlertMessAgedIvBorder {
ตำแหน่ง: แก้ไข;
_position: สัมบูรณ์;
ความกว้าง: 750px;
ความสูง: 370px;
ซ้าย: 50%;
ด้านบน: 50%;
มาร์จิ้น: -185px 0 0 -375px;
ความเป็นมา:#000;
ตัวกรอง: อัลฟ่า (ความทึบ = 30);
-moz-opacity: 0.3;
ความทึบ: 0.3;
z-index: 98;
แสดง: ไม่มี;
-
.AlertMessageDiv {
ตำแหน่ง: แก้ไข;
_position: สัมบูรณ์;
ความกว้าง: 730px;
ความสูง: 350px;
ซ้าย: 50%;
ด้านบน: 50%;
มาร์จิ้น: -175px 0 0 -365px;
ความเป็นมา: #FFF;
z-index: 99;
แสดง: ไม่มี;
ขนาดตัวอักษร: 14px;
-
<div> </div>
<div> </div>
<div> </div>
วิธีครอบคลุมทั้งเว็บเพจด้วยพื้นหลังป๊อปอัพ
1. วิธี CSS
การคัดลอกรหัสมีดังนี้: .alertMessageBg {
ตำแหน่ง: แก้ไข;
_position: สัมบูรณ์;
ความกว้าง: 100%;
ความสูง: 100%;
ซ้าย: 0;
ด้านบน: 0;
ความเป็นมา:#000;
ความทึบ: 0.5;
-moz-opacity: 0.5;
ตัวกรอง: อัลฟ่า (ความทึบ = 50);
z-index: 97;
แสดง: ไม่มี;
-
2.JS วิธี
การคัดลอกรหัสมีดังนี้: .alertMessageBg {
ตำแหน่ง: สัมบูรณ์;
ความกว้าง: 100%;
ความสูง: 100%;
ซ้าย: 0;
ด้านบน: 0;
ความเป็นมา:#000;
ความทึบ: 0.5;
-moz-opacity: 0.5;
ตัวกรอง: อัลฟ่า (ความทึบ = 50);
z-index: 97;
แสดง: ไม่มี;
-
var bgwidth = document.body.clientwidth + 'px'
bgheight = document.body.clientheight + 'px'
AlertBgNode = $ ('. AlertMessageBg');
AlertBgNode.css ({'width': bgwidth, 'ความสูง': bgheight});
เมื่อเปรียบเทียบกับสองวิธีข้างต้นเป็นที่ชัดเจนว่าวิธี CSS นั้นใช้งานง่ายกว่าโดยเฉพาะอย่างยิ่งตอนนี้ไม่จำเป็นต้องเข้ากันได้กับ IE6
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บที่ใช้ JS ของทุกคน