บทความนี้อธิบายถึงวิธีการโผล่ออกมาจากพื้นหลังที่เป็นศูนย์กลางของชั้นโปร่งแสง Div โดย JS+CSS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> js+css ปรากฏขึ้นพื้นหลังกึ่งกลางโปร่งแสง Div Layer </title>
<style type = "text/css">
ร่างกาย {มาร์จิ้น: 0px;}
#BG {ความกว้าง: 100%; ความสูง: 100%; ด้านบน: 0PX; ซ้าย: 0PX; ตำแหน่ง: สัมบูรณ์; ตัวกรอง: อัลฟ่า (ความทึบ = 50); ความทึบ: 0.5; ความเป็นมา:#000000; แสดง: ไม่มี;}
#PopBox {ตำแหน่ง: Absolute; Width: 400px; ความสูง: 400px; ซ้าย: 50%; ด้านบน: 50%; มาร์จิ้น: -200px 0 0 -200px; แสดง: ไม่มี; พื้นหลัง:#666666;}
</style>
<script type = "text/javascript">
ฟังก์ชั่น pupopen () {
document.getElementById ("bg"). style.display = "block";
document.getElementById ("popbox"). style.display = "block";
-
ฟังก์ชั่น pupclose () {
document.getElementById ("bg"). style.display = "ไม่มี";
document.getElementById ("popbox"). style.display = "ไม่มี";
-
</script>
</head>
<body>
</br>
เลเยอร์ป๊อปอัพ CSS หรือหน้าต่างป๊อปอัพมีกล่องป๊อปอัพพื้นหลังโปร่งแสงเหมาะมากสำหรับการเข้าสู่ระบบเว็บไซต์การลงทะเบียนผู้ใช้และการแจ้งเตือน </br> ie และ ff, op สามารถทั้งสอง ~ หน้าต่างป๊อปอัพพื้นหลังเป็นโปร่งแสง </br>
หลักการ: สองเลเยอร์หนึ่งมีความสูงและความกว้าง 100%และอีกชั้นหนึ่งเป็นเนื้อหาเฉพาะของหน้าต่างที่คุณต้องการปรากฏขึ้น </br> การโปร่งแสงแบบอนุกรมใช้ใน IE: ตัวกรอง: อัลฟ่า (opacity = 60); ในการใช้งานที่ไม่ใช่ความทึบ: 0.60;
</br> </br> <a href = "#" onclick = "pupopen ()"> คลิกที่นี่เพื่อเปิดหน้าต่าง </a>
<div id = "bg"> </div>
<div id = "popbox"> สองเลเยอร์หนึ่งมีความสูงและความกว้าง 100%และอีกชั้นหนึ่งเป็นเนื้อหาเฉพาะของหน้าต่างที่คุณต้องการปรากฏขึ้น โปร่งแสงใช้ใน IE: ตัวกรอง: อัลฟ่า (ความทึบ = 60); ในการใช้งานที่ไม่ใช่ความทึบ: 0.60;
<br>
<br>
<br>
<a href = "#" onclick = "pupclose ()"> คลิกเพื่อปิดหน้าต่าง </a>
</div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน