บทความนี้อธิบายวิธีการของ JS+CSS เพื่อใช้หน้าต่างป๊อปอัพ Div และทำให้พื้นหลังมืดลง แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <html>
<head>
<title> การใช้งาน JS+CSS ของ Div Popup Window ในขณะที่พื้นหลังจะมืดกว่า </title>
<script>
ฟังก์ชั่นล็อค () {
document.all.ly.style.display = "block";
document.all.ly.style.width = document.body.clientwidth;
document.all.ly.style.height = document.body.clientheight;
document.all.layer2.style.display = 'block';
-
function lock_checkform (Theform) {
document.all.ly.style.display = 'none'; document.all.layer2.style.display = 'ไม่มี';
กลับเท็จ;
-
</script>
<style type = "text/css">
-
.STYLE1 {ขนาดตัวอักษร: 12PX}
A: ลิงก์ {
สี: #000;
การตกแต่งข้อความ: ไม่มี;
-
A: เยี่ยมชม {
การตกแต่งข้อความ: ไม่มี;
-
A: โฮเวอร์ {
การตกแต่งข้อความ: ไม่มี;
-
A: ใช้งาน {
การตกแต่งข้อความ: ไม่มี;
-
-
</style>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">>
</head>
<body>
<p allign = "center">
<อินพุต type = "button" value = "popup div" onclick = "การล็อค ()" />
</p>
<div id = "ly" style = "ตำแหน่ง: สัมบูรณ์; top: 0px; ตัวกรอง: alpha (opacity = 60); พื้นหลังสี: #777;
z-index: 2; ซ้าย: 0px; แสดง: ไม่มี; ">
</div>
<!-เริ่มต้นเฟรมเวิร์กลอย->
<div id = "layer2" align = "center" style = "ตำแหน่ง: สัมบูรณ์; z-index: 3; ซ้าย: นิพจน์ ((document.body.offsetWidth-540)/2); ด้านบน: นิพจน์ ((document.body.offsetheight-170)/10);
พื้นหลังสี: #FFF; แสดง: ไม่มี; ">
<ตาราง cellpadding = "0" cellpacing = "0" style = "border: 0 solid #e7e3e7;
การล่มสลายของชายแดน: การล่มสลาย ">
<tr>
<td style = "พื้นหลังสี: #73a2d6; สี: #ffff; padding-left: 4px; padding-top: 2px;
Font-Weight: ตัวหนา; FONT-SIZE: 12PX; "Valign =" Middle ">
<div align = "ขวา"> <a href = JavaScript:; onclick = "lock_checkform (นี่);"> [ปิด] </a> </div> </td>
</tr>
<tr>
<td align = "center">
<br> <br> <hr> <p allign = "center"> <font color = สีแดง> เอฟเฟกต์พิเศษนี้ถูกรวบรวมจากอินเทอร์เน็ตเพื่อความสนใจและการเรียนรู้เท่านั้นและไม่ได้มีวัตถุประสงค์เพื่อการค้า ที่มา: wulin.com </font> </p>
</td>
</tr>
</table>
</div>
<!-Flamework End->
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน