สมมติว่าเรามีตู้คอนเทนเนอร์ดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<style type="text/css">
#คอนเทนเนอร์{ความกว้าง:อัตโนมัติ;ความสูง:อัตโนมัติ;}
/*แอตทริบิวต์ overflow:hidden; ในที่นี้มีจุดประสงค์หลักเพื่อตั้งค่าส่วนที่อยู่นอกคอนเทนเนอร์ให้ถูกซ่อนโดยอัตโนมัติ เหตุผลที่ตั้งค่าแอตทริบิวต์นี้คือเพื่อแก้ไขปัญหาความเข้ากันได้ของเบราว์เซอร์ของ IE8 และเวอร์ชันที่ต่ำกว่า*/
</สไตล์>
<div id="คอนเทนเนอร์">
</div>
ตอนนี้เราต้องการแสดงเลเยอร์ div ในหน้าเว็บเพื่อไม่ให้คอนเทนเนอร์ไม่สามารถใช้งานได้ก่อนที่จะปิดเลเยอร์ div ของป๊อปอัป
จากนั้นก่อนอื่นเราจำเป็นต้องกำหนดเลเยอร์ div ของมาสก์นี้ดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="continer">
<!―เพียงใส่ชั้นมาส์กลงในภาชนะ
<divid=”shade” style=”width:1600px;height:900px;/*กำหนดขนาดเริ่มต้นให้กับเลเยอร์มาสก์*/”>
<ชื่ออินพุต=”ปิด” id=”ปิด” ค่า=”ปิด”>
</div>
</div>
จากนั้นใช้ js เพื่อทำให้เลเยอร์มาส์กแสดงบนหน้าจอเสมอและไม่สามารถจัดการเนื้อหาภายใต้เลเยอร์มาส์กได้ คลิกปุ่มปิดเพื่อปิดเลเยอร์มาส์ก
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
$(ฟังก์ชั่น(){
//รับความกว้างและความสูงภายในของเบราว์เซอร์ปัจจุบัน
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//กำหนดความกว้างและความสูงของเลเยอร์มาสก์
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//ตั้งค่าปุ่มปิดให้แสดงตรงกลาง
$("#close").css("margin-top",nHeight/2-50+"px");
//ตั้งค่าเหตุการณ์ที่จะเกิดขึ้นเมื่อขนาดเบราว์เซอร์เปลี่ยนแปลง
$(หน้าต่าง).ปรับขนาด(ฟังก์ชั่น(){
//รับความกว้างและความสูงภายในของเบราว์เซอร์ปัจจุบัน
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//กำหนดความกว้างและความสูงของเลเยอร์มาสก์
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//ตั้งค่าปุ่มปิดให้แสดงตรงกลาง
$("#putPwd").css("margin-top",nHeight/2-50+"px");
-
//ตั้งค่าปุ่มปิดเพื่อกำจัดชั้นมาส์ก
$("#close").คลิก(ฟังก์ชั่น(){
$("#shade").removeAttr("id");
$("#shade").html("");
-
//สามารถเขียนด้วย pure js ได้
Document.getElementById (“เฉดสี”). สไตล์…….;
//ไม่มีประโยชน์ที่จะพูดเพิ่มเติมในภายหลัง หากคุณสนใจ แต่ไม่รู้จะเขียนอย่างไรจริงๆ โปรดติดต่อฉันได้
-
</สคริปต์>