บทความนี้อธิบายวิธีการโผล่ออกมาพร้อมกับเอฟเฟกต์หน้ากากโปร่งใสสีเทาดำเต็มหน้าจอโดย JS+CSS แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
มีผลกระทบดังกล่าวในหลาย ๆ เว็บไซต์ หลังจากดำเนินการบางอย่างหน้ากากโปร่งแสงสีเทาดำจะปรากฏขึ้น เนื้อหาที่ระบุสามารถดำเนินการได้เช่นกล่องเข้าสู่ระบบและเนื้อหาอื่น ๆ มาแนะนำวิธีการบรรลุผลนี้ ตัวอย่างรหัสมีดังนี้:
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "Author" content = "// www.vevb.com/"/>
<title> วิธีการป๊อปอัพเอฟเฟกต์หน้ากากโปร่งใสสีเทา-ดำเต็มหน้าจอ-wulin.com </title>
<style type = "text/css">
-
-
มาร์จิ้น: 0px;
Padding: 0px;
-
. Zhezhao
-
ความกว้าง: 100%;
ความสูง: 100%;
พื้นหลังสี:#000;
ตัวกรอง: อัลฟ่า (ความทึบ = 50);
-moz-opacity: 0.5;
ความทึบ: 0.5;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0px;
ด้านบน: 0px;
แสดง: ไม่มี;
z-index: 1,000;
-
.login
-
ความกว้าง: 280px;
ความสูง: 180px;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 200px;
ซ้าย: 50%;
พื้นหลังสี:#000;
ขอบซ้าย: -140px;
แสดง: ไม่มี;
z-index: 1500;
-
.เนื้อหา
-
ระยะขอบด้านบน: 50px;
สี: สีแดง;
ความสูงบรรทัด: 200px;
ความสูง: 200px;
TEXT-ALIGN: CENTER;
-
</style>
<script type = "text/javascript">
window.onload = function ()
-
var zhezhao = document.getElementById ("Zhezhao");
var login = document.getElementById ("เข้าสู่ระบบ");
var bt = document.getElementById ("bt");
var btclose = document.getElementById ("btclose");
bt.onclick = function ()
-
Zhezhao.style.display = "block";
เข้าสู่ระบบ style.display = "block";
-
btclose.onclick = function ()
-
Zhezhao.style.display = "ไม่มี";
เข้าสู่ระบบ style.display = "ไม่มี";
-
-
</script>
</head>
<body>
<div id = "zhezhao"> </div>
<div id = "เข้าสู่ระบบ"> <button id = "btclose"> คลิกเพื่อปิด </button> </div>
<div> wulin.com ยินดีต้อนรับคุณ <button id = "bt"> คลิกเพื่อป๊อปอัพมาสก์ </button> </div>
</body>
</html>
ข้างต้นใช้ฟังก์ชั่นหน้ากากพื้นฐาน เมื่อคลิกเพื่อปรากฏตัวหน้ากากวัตถุจะปรากฏขึ้น เมื่อคลิกเพื่อปิดเอฟเฟกต์หน้ากากจะหายไป นี่คือวิธีการบรรลุผล:
หลักการดำเนินการ:
สร้าง DIV แบบเต็มหน้าจอโดยใช้การวางตำแหน่งสัมบูรณ์เพื่อให้สามารถแยกออกจากสตรีมเอกสารโดยไม่ส่งผลกระทบต่อองค์ประกอบอื่น ๆ และตั้งเป็นสถานะโปร่งแสง แน่นอนความโปร่งใสนี้สามารถปรับได้ตามความประสงค์และสร้างองค์ประกอบการเข้าสู่ระบบซึ่งยังใช้การวางตำแหน่งสัมบูรณ์และทำให้ค่าแอตทริบิวต์ Z-index ของมันมากกว่า DIV บนหน้าจอและในเวลานี้มันจะไม่ได้รับการคุ้มครองโดย Div แบบเต็มหน้าจอ ในสถานะเริ่มต้นค่าแอตทริบิวต์การแสดงผลของสอง divs นี้ไม่มี เมื่อคลิกปุ่มที่เกี่ยวข้องพวกเขาสามารถเปลี่ยนค่าแอตทริบิวต์การแสดงผลได้
ข้อเสนอแนะ: รหัสที่เขียนด้วยลายมือให้มากที่สุดเท่าที่จะเป็นไปได้สามารถปรับปรุงประสิทธิภาพการเรียนรู้และความลึกได้อย่างมีประสิทธิภาพ
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บของทุกคน