In diesem Artikel wird die Methode zur Implementierung der Popup-Ebene beschrieben, die die gesamte Seite von JS und CSS abdeckt. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Die gemeinsamen Stile und Strukturen für gerahmte transparente Hintergründe auf der Popup-Ebene sind wie folgt:
Die Codekopie lautet wie folgt: .AertMessageBg {
Position: fest;
_position: absolut;
Breite: 100%;
Höhe: 100%;
links: 0;
Top: 0;
Hintergrund:#000;
Deckkraft: 0,5;
-moz-opacity: 0,5;
Filter: Alpha (Opazität = 50);
Z-Index: 97;
Anzeige: Keine;
}
.ArertMessAntivborder {
Position: fest;
_position: absolut;
Breite: 750px;
Höhe: 370px;
Links: 50%;
Top: 50%;
Rand: -185px 0 0 -375px;
Hintergrund:#000;
Filter: Alpha (Deckkraft = 30);
-moz-opacity: 0,3;
Deckkraft: 0,3;
Z-Index: 98;
Anzeige: Keine;
}
.alertMessagnev {
Position: fest;
_position: absolut;
Breite: 730px;
Höhe: 350px;
Links: 50%;
Top: 50%;
Rand: -175px 0 0 -365px;
Hintergrund: #fff;
Z-Index: 99;
Anzeige: Keine;
Schriftgröße: 14px;
}
<div> </div>
<div> </div>
<div> </div>
So behandeln Sie die gesamte Webseite mit einem Pop-up-Hintergrund
1.CSS -Methode
Die Codekopie lautet wie folgt: .AertMessageBg {
Position: fest;
_position: absolut;
Breite: 100%;
Höhe: 100%;
links: 0;
Top: 0;
Hintergrund:#000;
Deckkraft: 0,5;
-moz-opacity: 0,5;
Filter: Alpha (Opazität = 50);
Z-Index: 97;
Anzeige: Keine;
}
2.JS -Methode
Die Codekopie lautet wie folgt: .AertMessageBg {
Position: absolut;
Breite: 100%;
Höhe: 100%;
links: 0;
Top: 0;
Hintergrund:#000;
Deckkraft: 0,5;
-moz-opacity: 0,5;
Filter: Alpha (Opazität = 50);
Z-Index: 97;
Anzeige: Keine;
}
var bgwidth = document.body.clientwidth + 'px',
bgHeight = document.body.clientHeight + 'px',,
alertbgnode = $ ('. alertMessageBg');
alertbgnode.css ({'width': bgwidth, 'Höhe': BgHeight});
Im Vergleich der beiden oben genannten Methoden ist es offensichtlich, dass die CSS -Methode einfacher ist, insbesondere jetzt, da es nicht mit IE6 kompatibel sein muss.
Ich hoffe, dieser Artikel wird für das JS-basierte Webprogramming-Design aller hilfreich sein.