So implementieren Sie die div-Popup-Ebene in js_javascript-Kenntnissen

Das Beispiel in diesem Artikel beschreibt die Methode zur Implementierung der div-Popup-Ebene in js. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Es wird gesagt, dass es jetzt, da verschiedene Plug-Ins herausgekommen sind, wirklich einfach ist, eine Popup-Ebene zu implementieren, aber manchmal habe ich das Gefühl, dass diese Plug-Ins nicht praktikabel sind und oft nach einer reinen ursprünglichen JS-Ökologie suchen .Lassen Sie mich ein natives JS-Div-Popup-Beispiel teilen, Freunde in Not können einen Blick darauf werfen.

Dazu muss man nichts mehr sagen, einfach den Code posten. Es gibt Codes und Kommentare:

Code kopieren Der Code lautet wie folgt:

/*
* Popup-DIV-Ebene
*/
Funktion showDiv()
{
var Idiv = document.getElementById("Idiv");
var mou_head = document.getElementById('mou_head');
Idiv.style.display = "block";
//Die folgenden Teile müssen die Popup-Ebene zentrieren
Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2 document.documentElement.scrollLeft "px";
Idiv.style.top =(document.documentElement.clientHeight-Idiv.clientHeight)/2 document.documentElement.scrollTop-50 "px";

//Die folgenden Teile machen die gesamte Seite grau und nicht anklickbar
var procbg = document.createElement("div"); //Erstelle zuerst ein div
procbg.setAttribute("id","mybg"); //Definieren Sie die ID des div
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "fixed";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zIndex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "Alpha(opacity=70)";
//Seite zum Hinzufügen von Hintergrundebenen
document.body.appendChild(procbg);
document.body.style.overflow = "hidden"; //Bildlaufleiste abbrechen

//Die folgenden Teile implementieren den Drag-Effekt der Popup-Ebene
var posX;
var posY;
mou_head.onmousedown=function(e)
{
if(!e) e = window.event; //IE
posX = e.clientX - parseInt(Idiv.style.left);
posY = e.clientY - parseInt(Idiv.style.top);
document.onmousemove = Mousemove;
}
document.onmouseup = function()
{
document.onmousemove = null;
}
Funktion Mousemove(ev)
{
if(ev==null) ev = window.event;//IE
Idiv.style.left = (ev.clientX - posX) "px";
Idiv.style.top = (ev.clientY - posY) "px";
}
}
Funktion closeDiv() //Schließe die Popup-Ebene
{
var Idiv=document.getElementById("Idiv");
Idiv.style.display="none";
document.body.style.overflow = "auto"; //Seiten-Bildlaufleiste wiederherstellen
var body = document.getElementsByTagName("body");
var mybg = document.getElementById("mybg");
body[0].removeChild(mybg);
}

Dies wird verwendet, um das Ziehen von Ebenen zu implementieren

Einige Verschönerungseffekte können Sie selbst ändern.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.