Artikel ini menjelaskan metode JS+CSS untuk mengimplementasikan jendela pop-up div dan menggelapkan latar belakang. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <Html>
<head>
<title> JS+CSS Implementasi jendela popup Div, sedangkan latar belakang menjadi lebih gelap </iteme>
<script>
function locking () {
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 = 'none';
mengembalikan false;
}
</script>
<type style = "text/css">
<!-
.Style1 {font-size: 12px}
A: link {
Warna: #000;
Dekorasi Teks: Tidak Ada;
}
A: Dikunjungi {
Dekorasi Teks: Tidak Ada;
}
A: Hover {
Dekorasi Teks: Tidak Ada;
}
A: Active {
Dekorasi Teks: Tidak Ada;
}
->
</tyle>
<meta http-equiv = "konten tipe" content = "text/html; charset = gb2312">
</head>
<body>
<p align = "center">
<input type = "tombol" value = "popup div" onclick = "locking ()" />
</p>
<Div id = "ly" style = "posisi: absolute; atas: 0px; filter: alpha (opacity = 60); latar belakang-warna: #777;
z-index: 2; Kiri: 0px; Tampilan: Tidak Ada; ">
</div>
<!-Kerangka Mengambang Mulai->
<Div id = "layer2" align = "center" style = "Posisi: absolute; z-index: 3; kiri: ekspresi ((document.body.offsetWidth-540)/2); atas: ekspresi ((document.body.offsetheight-170)/10);
Latar Belakang-Color: #FFF; Tampilan: Tidak Ada; ">
<Table cellpadding = "0" cellPacing = "0" style = "border: 0 solid #e7e3e7;
Border-Collapse: runtuh; ">
<tr>
<td style = "latar belakang-warna: #73a2d6; warna: #ffff; padding-left: 4px; padding-top: 2px;
font-weight: tebal; Ukuran font: 12px; "valign =" tengah ">
<div align = "right"> <a href = javascript:; OnClick = "lock_checkform (this);"> [tutup] </a> </div> </td>
</tr>
<tr>
<td align = "center">
<br> <br> <hr> <p align = "center"> <font color = red> efek khusus ini dikumpulkan dari internet hanya untuk minat dan pembelajaran, dan bukan untuk tujuan komersial. Sumber: wulin.com </font> </p>
</td>
</tr>
</boable>
</div>
<!-Floating Framework End->
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.