Cet article décrit la méthode de JS + CSS pour implémenter les fenêtres pop-up div et assombrir l'arrière-plan. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <html>
<adal>
<Title> JS + CSS Implémentation de la fenêtre Popup Div, tandis que l'arrière-plan devient plus sombre </TITAL>
<cript>
Verrouillage de la fonction () {
document.all.ly.style.display = "bloc";
document.all.ly.style.width = document.body.clientwidth;
document.all.ly.style.height = document.body.clientHeight;
document.all.layer2.style.display = 'block';
}
fonction lock_checkform (theform) {
document.all.ly.style.display = 'Aucun'; document.all.layer2.style.display = 'Aucun';
retourne false;
}
</cript>
<style type = "text / css">
<! -
.Style1 {Font-Size: 12px}
a: lien {
Couleur: # 000;
Décoration du texte: aucune;
}
A: visité {
Décoration du texte: aucune;
}
A: Hover {
Décoration du texte: aucune;
}
a: actif {
Décoration du texte: aucune;
}
->
</ style>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312">
</ head>
<body>
<p align = "Center">
<input type = "bouton" value = "popup div" onclick = "locking ()" />
</p>
<div id = "ly" style = "position: absolu; top: 0px; filtre: alpha (opacité = 60); fond-couleur: # 777;
Z-Index: 2; gauche: 0px; Affichage: aucun; ">
</div>
<! - Démarrage du cadre flottant ->
<div id = "couche2" align = "Center" style = "position: absolu; z-index: 3; gauche: expression ((document.body.offsetwidth-540) / 2); top: expression ((document.body.offsetheight-170) / 10);
Color d'arrière-plan: #FFF; Affichage: aucun; ">
<table cellpadding = "0" cellpacing = "0" style = "border: 0 solide # e7e3e7;
Border-Collapse: s'effondrer; ">
<tr>
<td style = "Background-Color: # 73A2D6; couleur: #ffff; padding-left: 4px; padding-top: 2px;
Police-poids: Bold; taille de police: 12px; "valign =" middle ">
<div align = "droite"> <a href = javascript:; onClick = "lock_checkform (this);"> [close] </a> </div> </td>
</tr>
<tr>
<td align = "Center">
<br> <br> <hr> <p align = "Center"> <Font Color = Red> Ces effets spéciaux sont collectés sur Internet uniquement pour l'intérêt et l'apprentissage, et ne sont pas à des fins commerciales. Source: wulin.com </font> </p>
</td>
</tr>
</ table>
</div>
<! - Termissement du cadre flottant ->
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.