Dieser Artikel beschreibt die Methode von JS+CSS, um Div-Pop-up-Fenster zu implementieren und den Hintergrund zu verdunkeln. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <html>
<kopf>
<title> JS+CSS -Implementierung des Div -Popup -Fensters, während der Hintergrund dunkler wird </title>
<Script>
Funktion sperren () {
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';
}
Funktion lock_checkform (theform) {
document.all.ly.style.display = 'none'; document.all.layer2.style.display = 'none';
false zurückgeben;
}
</script>
<style type = "text/css">
<!-
.Style1 {Schriftgröße: 12px}
A: Link {
Farbe: #000;
Textdekoration: Keine;
}
A: besucht {
Textdekoration: Keine;
}
A: Hover {
Textdekoration: Keine;
}
A: aktiv {
Textdekoration: Keine;
}
->
</style>
<meta http-äquiv = "content-type" content = "text/html; charset = gb2312">
</head>
<body>
<P Align = "Center">
<input type = "button" value = "popup div" onclick = "sperrung ()" />
</p>
<div id = "ly" style = "Position: absolut; top: 0px; filter: alpha (opacity = 60); Hintergrundfarbe: #777;
Z-Index: 2; links: 0px; Anzeige: keine; ">
</div>
<!-Floating Framework Start->
<div id = "layer2" align = "center" style = "Position: absolut; Z-Index: 3; links: Ausdruck ((document.body.Offsetwidth-540)/2); obere: Ausdruck ((Dokument.Body.Offsetheight)/10);
Hintergrundfarbe: #fff; Anzeige: keine; ">
<Table CellPadding = "0" cellpacing = "0" style = "border: 0 solide #e7e3e7;
Grenzkollapse: Zusammenbruch; ">
<tr>
<td style = "Hintergrundfarbe: #73A2D6; Farbe: #ffff; Padding-Links: 4px; Padding-Top: 2px;
Schriftgewicht: fett; Schriftgröße: 12px; "Valign =" Middle ">
<div align = "rechts"> <a href = javaScript:; onclick = "lock_checkform (this);"> [schließen] </a> </div> </td>
</tr>
<tr>
<td align = "center">
<br> <br> <hr> <p align = "center"> <font color = rot> Diese Spezialeffekte werden aus dem Internet nur für Interesse und Lernen gesammelt und sind nicht für kommerzielle Zwecke. Quelle: Wulin.com </font> </p>
</td>
</tr>
</table>
</div>
<!-schwimmendes Rahmen Ende->
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.