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

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

WBOY

Libérer： 2016-05-16 16:27:37

original

1765 Les gens l'ont consulté

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.