Dieser Artikel beschreibt die Methode zur Implementierung von Maskenschicht-Popup-Frames durch JS. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Gestern benötigte die Firmenwebsite ein Popup-Fenster, um einige Informationen zu fordern, und bat mich, den Popup-JS-Code und das Popup-Fenster HTML zusammen zu schreiben. Rufen Sie ihn einfach an, wo Sie ihn benötigen.
Ich werde nicht so viel sagen, lade einfach den Code hoch und ich bin der Meinung, dass es definitiv Kompatibilitätsprobleme geben wird. Bitte weisen Sie darauf hin, wenn Sie es sehen:
Kopieren Sie den Code wie folgt: <Styles>
#H-Dialog {Anzeige: Keine; Position: absolut; Z-Index: 999999; Breite: 400px; Höhe: Auto; Hintergrundfarbe: #fff;}
#H-Dialog .CLOSE {Float: Right; Schriftgröße: 30px; Margin-Right: 10px; Margin-Top: 5px; Cursor: Zeiger;}
#H-Dialog .Title {Höhe: 40px; Padding-Links: 10px; Schriftgröße: 20px; Zeilenhöhe: 40px;}
#H-Dialog #msgcont {Höhe: 36px; Rand: 30px 0 50px; Padding-Links: 65px; Schriftgröße: 25px; Linienhöhe: 36px; Vertikal-Align: Middle; Hintergrund: URL (../ Bilder/ui_alert.png) No-Repeat 20px 50%;}
</style>
<div id = "h-dialog">
<a onclick = "popupclose (this)"> × </a>
<div> Tipp </div>
<div id = "msgcont"> Inhalt </div>
</div>
<script type = "text/javaScript">
// den Hintergrundbildschirm sperren
function sperrscreen () {
var clienth = document.body.offseteight; // Körperhöhe
var clientw = document.body.offsetwidth; // Körperbreite
var doch = document.body.scrollHeight; // Browserhöhe
var docw = document.body.scrollwidth; // Browserbreite
var bgw = clientW> docw? ClientW: docw; // Erhalten Sie die gültige Breite
var bgh = clienth> doch? Clienth: Doch; // das gültige Hoch bekommen
var Blackbg = document.createelement ("div");
Blackbg.id = "Blackbg";
Blackbg.Style.position = "Absolute";
Blackbg.Style.zindex = "99999";
Blackbg.Style.top = "0";
Blackbg.Style.Left = "0";
Blackbg.Style.width = BGW+"PX";
Blackbg.Style.Height = BGH+"PX";
Blackbg.Style.opacity = "0,4";
Blackbg.Style.BackgroundColor = "#333";
document.body.appendchild (Blackbg);
}
// Button -Ereignis schließen
Funktion popupclose (el) {
var Blackbg = document.getElementById ("Blackbg");
Blackbg && document.body.removechild (Blackbg);
el.parentnode.style.display = "none";
}
// Ursprung
Funktion autoclose (id) {
id = id || "H-Dialog";
var Blackbg = document.getElementById ("Blackbg");
var objdiv = document.getElementById (id);
setTimeout (function () {
Blackbg && document.body.removechild (Blackbg);
objdiv.style.display = "none";
}, 2000);
}
/**
*Funktion: Popup-Informationen
* Parameter 1: Eingabeaufforderung mit Informationen Inhalt
* Parameter 2: Der Status der Standardeingabeaufforderung ist 0. Die Eingabeaufforderungsinformationen sind 1. Die Erfolgsinformationen sind
* Parameter 3: Die ID der Popup-Div, die Standard "H-Dialog"
* Parameter 4: Die ID des Inhalts des Popup-Fensters, Standard "msgcont", Standard "msgcont"
**//
Function Showmsg (msg) {
msg = msg || "Bitte wiederholen Sie";
var status = argumente [1] || 0,,
Popupid = Argumente [2] || "H-Dialog",
contentID = Argumente [3] || "msgcont";
lockscreen ();
// Die tatsächliche Höhe und Breite des Bildschirms
var pagewidth = window.innnerwidth;
var pageHeight = window.innerHeight;
if (typeof pagewidth! = "number") {
if (document.compatmode == "CSS1COMPAT") {
pagewidth = document.documentElement.clientwidth;
pageHeight = document.documentElement.clientHeight;
} anders {
pagewidth = document.body.clientwidth;
pageHeight = document.body.clientHeight;
}
}
// Die Bildlaufleiste hat eine Höhe und Breite
var scrollleft = window.document.documentElement.scrollleft;
var scrolltop = 0;
if (typeof window.pageyOffset! = 'undefined') {
scrolltop = window.pageyOffset;
} else if (typeof window.document.compatmode! = 'undefined' &&
window.document.compatmode! = 'backcompat') {
scrolltop = window.document.documentElement.scrolltop;
} else if (typeof window.document.body! = 'undefined') {
scrolltop = window.document.body.scrolltop;
}
var div_x = (pagewidth - 400) / 2 + scrollleft;
var div_y = (pageHeight - 200) / 2 + scrolltop;
var objdiv = document.getElementById (popupid);
if (Status) {
document.getElementById (contentID) .style.background = "URL ($ root/assets/bilder/ui_success.png) No-Repeat 20px 50%";
}
document.getElementById (contentID) .innerhtml = msg;
objdiv.style.display = "block";
objdiv.style.left = div_x + "px";
objdiv.style.top = div_y + "px";
Autoclosse (Popupid);
}
</script>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.