Cet article décrit la méthode d'implémentation de la couche pop-up couvrant la page entière par JS et CSS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Les styles et structures communs pour les arrière-plans transparents encadrés sur la couche pop-up sont les suivants:
La copie de code est la suivante: .AlertMessageBg {
Position: fixe;
_Position: Absolute;
Largeur: 100%;
hauteur: 100%;
à gauche: 0;
en haut: 0;
Contexte: # 000;
Opacité: 0,5;
-moz-opacité: 0,5;
filtre: alpha (opacité = 50);
Z-Index: 97;
Affichage: aucun;
}
.AlertMessagedivborder {
Position: fixe;
_Position: Absolute;
Largeur: 750px;
hauteur: 370px;
Gauche: 50%;
en haut: 50%;
marge: -185px 0 0 -375px;
Contexte: # 000;
filtre: alpha (opacité = 30);
-moz-opacité: 0,3;
Opacité: 0,3;
Z-Index: 98;
Affichage: aucun;
}
.AlertMessagediv {
Position: fixe;
_Position: Absolute;
Largeur: 730px;
hauteur: 350px;
Gauche: 50%;
en haut: 50%;
marge: -175px 0 0 -365px;
Contexte: #FFF;
Z-Index: 99;
Affichage: aucun;
taille de police: 14px;
}
<div> </div>
<div> </div>
<div> </div>
Comment couvrir toute la page Web avec un fond pop-up
Méthode 1.css
La copie de code est la suivante: .AlertMessageBg {
Position: fixe;
_Position: Absolute;
Largeur: 100%;
hauteur: 100%;
à gauche: 0;
en haut: 0;
Contexte: # 000;
Opacité: 0,5;
-moz-opacité: 0,5;
filtre: alpha (opacité = 50);
Z-Index: 97;
Affichage: aucun;
}
2.JS Méthode
La copie de code est la suivante: .AlertMessageBg {
Position: absolue;
Largeur: 100%;
hauteur: 100%;
à gauche: 0;
en haut: 0;
Contexte: # 000;
Opacité: 0,5;
-moz-opacité: 0,5;
filtre: alpha (opacité = 50);
Z-Index: 97;
Affichage: aucun;
}
var bgwidth = document.body.clientwidth + 'px',
bgheight = document.body.clientheight + 'px',
alertBgnode = $ ('. alertMessageBg');
alertbgnode.css ({'width': bgwidth, 'height': bgheight});
En comparant les deux méthodes ci-dessus, il est évident que la méthode CSS est plus facile, surtout maintenant qu'elle n'a pas besoin d'être compatible avec IE6.
J'espère que cet article sera utile à la conception de programmation Web basée sur JS de tous.