บทความนี้อธิบายวิธีการใช้เลเยอร์ป๊อปอัพ Div โดย JS แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
อย่างไรก็ตามมันเป็นเรื่องง่ายที่จะใช้เลเยอร์ป๊อปอัพเมื่อปลั๊กอินต่างๆได้รับการปล่อยตัว อย่างไรก็ตามบางครั้งฉันคิดว่าปลั๊กอินเหล่านั้นไม่ได้ใช้งานได้จริงและมักจะพบสิ่งดั้งเดิมของ JS บริสุทธิ์ ให้ฉันแบ่งปันอินสแตนซ์ชั้นป๊อปอัพ JS Div Native กับคุณ เพื่อนที่ต้องการสามารถดูได้
ไม่จำเป็นต้องพูดเพียงแค่โพสต์รหัส มีรหัสและความคิดเห็น:
คัดลอกรหัสดังนี้:/*
* ปรากฏขึ้น Div Layer
-
ฟังก์ชั่น showdiv ()
-
var idiv = document.getElementById ("idiv");
var mou_head = document.getElementById ('mou_head');
idiv.style.display = "block";
// ชิ้นส่วนต่อไปนี้ควรอยู่กึ่งกลางเพื่อแสดงเลเยอร์ป๊อปอัพ
idiv.style.left = (document.documentelement.clientwidth-idiv.clientWidth) /2+document.documentelement.scrollleft+ "px";
idiv.style.top = (document.documentelement.clientheight-idiv.clientheight) /2+document.documentelement.scrolltop-50+ "px";
// ชิ้นส่วนต่อไปนี้ทำให้ทั้งหน้าสีเทาคลิกออกได้
var procbg = document.createelement ("div"); // สร้าง div ก่อน
procbg.setAttribute ("id", "mybg"); // กำหนด ID ของ div
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "แก้ไข";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.Opacity = "0.6";
procbg.style.filter = "alpha (ความทึบ = 70)";
// เพิ่มเลเยอร์พื้นหลังลงในหน้า
document.body.appendchild (procbg);
document.body.style.overflow = "ซ่อน"; // ยกเลิกแถบเลื่อน
// ชิ้นส่วนต่อไปนี้ตระหนักถึงเอฟเฟกต์การลากของชั้นป๊อปอัพ
var posx;
var posy;
mou_head.onmousedown = function (e)
-
ถ้า (! e) e = window.event; //เช่น
posx = e.clientx - parseint (idiv.style.left);
posy = e.clienty - parseint (idiv.style.top);
document.onmousemove = mousemove;
-
document.onmouseup = function ()
-
document.onmousemove = null;
-
ฟังก์ชั่น mousemove (EV)
-
ถ้า (ev == null) ev = window.event; // ie
idiv.style.left = (ev.clientx - posx) + "px";
idiv.style.top = (ev.clienty - posy) + "px";
-
-
ฟังก์ชั่น clostiv () // ปิดเลเยอร์ป๊อปอัพ
-
var idiv = document.getElementById ("idiv");
idiv.style.display = "ไม่มี";
document.body.style.overflow = "auto"; // คืนค่าหน้าเลื่อนหน้า
var body = document.getElementsByTagname ("body");
var mybg = document.getElementById ("mybg");
ร่างกาย [0] .removeChild (Mybg);
-
<!-เลเยอร์ป๊อปเริ่ม->
<div id = "idiv" style = "จอแสดงผล: ไม่มี; ตำแหน่ง: สัมบูรณ์; z-index: 1000; พื้นหลัง:#67a3d9;">>
<div id = "mou_head" 100px; ความสูง = 10px; z-index: 1001; ตำแหน่ง: Absolute; "> สิ่งนี้ใช้เพื่อใช้การลากเลเยอร์ </div>
<อินพุต type = "ปุ่ม" value = "ปิด" onclick = "closediv ();" -
</div>
<!-สิ้นสุด->
สำหรับเอฟเฟกต์การตกแต่งบางอย่างคุณสามารถปรับเปลี่ยนได้ด้วยตัวเอง
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน