อาจกล่าวได้ว่าหลังจากที่ฉันเข้าใจ "งู" ก่อนหน้านี้ฟังก์ชั่นนี้ยากน้อยกว่าที่ฉันจินตนาการไว้ในตอนแรก แน่นอนว่าวิธีนี้สงสัยว่าเป็นเรื่องยุ่งยากและในที่สุดก็มีการใช้งานฟังก์ชั่น มาวิเคราะห์และจัดระเบียบกันเถอะ
1. หลักการดำเนินการ
หลักการดำเนินการของบทความนี้มีดังนี้:
* อันที่จริงเลเยอร์ป๊อปอัพเลเยอร์หน้ากากและหน้าจอดั้งเดิมนั้นมีสาม divs ที่แตกต่างกันตามลำดับ
* ระดับของชั้นป๊อปอัพอยู่เหนือชั้นหน้ากากและระดับของเลเยอร์หน้ากากอยู่เหนือการแสดงหน้าดั้งเดิม
* เลเยอร์หน้ากากมีเอฟเฟกต์ที่ชัดเจน
* เลเยอร์หน้ากากไม่มีความหมายในทางปฏิบัติดังนั้นจึงไม่จำเป็นต้องเขียนในส่วน HTML แน่นอนว่ามันสามารถรับรู้ได้หลังจากเขียน
2. การใช้งานรหัส
ภาษา HTML มีดังนี้:
การคัดลอกรหัสมีดังนี้:
<html>
-
<body>
<enter>
<div> <อินพุต type = "button" value = "go" onclick = "show ()"> </div>
<div id = "Alert" style = "Display: None;">
<form>
เข้าสู่ระบบ
<input type = "text"> <input type = "password"> <input type = "subment" value = "เข้าสู่ระบบ">
</form>
</div>
</enter>
</body>
</html>
JavaScript ใช้เลเยอร์ป๊อปอัพและเลเยอร์หน้ากาก:
การคัดลอกรหัสมีดังนี้:
<span style = "ตัวอักษรขนาด: 12px;"> function show () {
var alertPart = document.getElementById ("แจ้งเตือน");
AlertPart.style.display = "block";
AlertPart.style.position = "Absolute";
AlertPart.style.top = "50%";
AlertPart.style.left = "50%";
AlertPart.style.margintop = "-75px";
AlertPart.style.marginleft = "-150px";
AlertPart.style.background = "Cyan";
AlertPart.style.width = "300px";
AlertPart.style.height = "200px";
AlertPart.style.zindex = "501";
var mybg = document.createelement ("div");
mybg.setAttribute ("id", "mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "สัมบูรณ์";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zindex = "500";
mybg.style.Opacity = "0.3";
mybg.style.filter = "alpha (ความทึบ = 30)";
document.body.appendchild (mybg);
document.body.style.overflow = "ซ่อน";
-
</script> </span>
ที่นี่เราใช้ z-index เพื่อแยกความแตกต่างลำดับชั้นความทึบและตัวกรอง: อัลฟ่า (ความทึบ =) ความโปร่งใส, document.createelement ("div") และ document.body.appendchild () สิ่งเหล่านี้ถูกใช้มาก่อนเพื่อให้เราสามารถบรรลุเป้าหมายได้ ในความเป็นจริงเมื่อเข้าใจหลักการทุกอย่างจะง่ายขึ้นมาก
ถนนยาวและลำบาก