So implementieren Sie eine Popup-Ebene, die die gesamte Seite abdeckt, mithilfe von JS- und CSS_Javascript-Kenntnissen

Das Beispiel in diesem Artikel beschreibt die Methode, mit js und css eine Popup-Ebene zu implementieren, die die gesamte Seite abdeckt. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Die gängigen Stile und Strukturen von Popup-Ebenen mit transparenten Hintergrundrahmen sind wie folgt:

Code kopieren Der Code lautet wie folgt:

.alertMessageBg{
Position:fest;
_position:absolut;
Breite: 100 %;
Höhe: 100 %;
links:0;
oben:0;
Hintergrund:#000;
Deckkraft:0,5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
.alertMessageDivBorder{
Position:fest;
_position:absolut;
Breite:750px;
Höhe:370px;
übrig: 50 %;
oben:50%;
Rand:-185px 0 0 -375px;
Hintergrund:#000;
filter:alpha(opacity=30);
-moz-opacity:0.3;
Deckkraft:0,3;
z-index:98;
display:none;
}
.alertMessageDiv{
Position:fest;
_position:absolut;
Breite:730px;
Höhe:350px;
übrig: 50 %;
oben:50%;
Rand:-175px 0 0 -365px;
Hintergrund:#fff;
z-index:99;
display:none;
Schriftgröße:14px;
}

So bedecken Sie die gesamte Webseite mit dem Hintergrund einer Popup-Ebene

1.css-Methode

Code kopieren Der Code lautet wie folgt:

.alertMessageBg{
Position:fest;
_position:absolut;
Breite: 100 %;
Höhe: 100 %;
links:0;
oben:0;
Hintergrund:#000;
Deckkraft:0,5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}

2.js-Methode

Code kopieren Der Code lautet wie folgt:

.alertMessageBg{
Position:absolut;
Breite: 100 %;
Höhe: 100 %;
links:0;
oben:0;
Hintergrund:#000;
Deckkraft:0,5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}

var bgWidth = document.body.clientWidth 'px',
bgHeight = document.body.clientHeight 'px',
alarmBgNode = $('.alertMessageBg');
alarmBgNode.css({'width':bgWidth,'height':bgHeight});

Beim Vergleich der beiden oben genannten Methoden ist es offensichtlich, dass die CSS-Methode problemloser ist, insbesondere jetzt, da sie nicht mit IE6 kompatibel ist.

Ich hoffe, dass dieser Artikel für alle bei der Webprogrammierung auf Basis von JS hilfreich sein wird.