Comment implémenter une couche contextuelle couvrant toute la page en utilisant les compétences js et css_javascript

L'exemple de cet article décrit la méthode d'utilisation de js et css pour implémenter une couche contextuelle couvrant la totalité de la page. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Les styles et structures courants des calques contextuels avec des cadres d'arrière-plan transparents sont les suivants :

Copier le code Le code est le suivant :

.alertMessageBg{
position:fixe;
_position:absolu;
largeur:100%;
hauteur:100%;
gauche:0;
haut :0;
arrière-plan :#000;
opacité:0,5;
-moz-opacité:0,5;
filtre:alpha(opacité=50);
indice z : 97 ;
affichage : aucun ;
>
.alertMessageDivBorder{
position:fixe;
_position:absolu;
largeur:750px;
hauteur:370px;
gauche : 50 % ;
haut : 50 % ;
marge : -185px 0 0 -375px ;
arrière-plan :#000;
filtre:alpha(opacité=30);
-moz-opacité:0.3;
opacité:0,3;
indice z : 98 ;
affichage : aucun ;
>
.alertMessageDiv{
position:fixe;
_position:absolu;
largeur:730px;
hauteur:350px;
gauche : 50 % ;
haut : 50 % ;
marge : -175px 0 0 -365px ;
arrière-plan :#fff;
indice z : 99 ;
affichage : aucun ;
taille de police : 14px ;
>

Comment couvrir l'intégralité de la page Web avec un arrière-plan de calque contextuel

Méthode 1.css

Copier le code Le code est le suivant :

.alertMessageBg{
position:fixe;
_position:absolu;
largeur:100%;
hauteur:100%;
gauche:0;
haut :0;
arrière-plan :#000;
opacité:0,5;
-moz-opacité:0,5;
filtre:alpha(opacité=50);
indice z : 97 ;
affichage : aucun ;
>

Méthode 2.js

Copier le code Le code est le suivant :

.alertMessageBg{
position:absolue;
largeur:100%;
hauteur:100%;
gauche:0;
haut :0;
arrière-plan :#000;
opacité:0,5;
-moz-opacité:0,5;
filtre:alpha(opacité=50);
indice z : 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 simple, surtout maintenant qu'elle n'est pas compatible avec IE6.

J'espère que cet article sera utile à la programmation Web de chacun basée sur JS.