JS-Methode zur Implementierung der Div-Pop-up-Schicht

Dieser Artikel beschreibt die Methode zur Implementierung der Div-Popup-Schicht durch JS. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:

Übrigens ist es wirklich einfach, Pop-up-Ebenen zu implementieren, wenn verschiedene Plug-Ins veröffentlicht werden. Ich denke jedoch manchmal, dass diese Plug-Ins nicht praktisch sind und oft einige reine JS-Original-Dinge finden. Lassen Sie mich eine native JS Div-Popup-Schichtinstanz mit Ihnen teilen. Bedürftige Freunde können einen Blick darauf werfen.

Unnötig zu erwähnen, dass sie einfach den Code veröffentlichen. Es gibt Codes und Kommentare:

Kopieren Sie den Code wie folgt:/*

* Pop die Div -Schicht auf

*/

Funktion showdiv ()

{

var idiv = document.getElementById ("idiv");

var mou_head = document.getElementById ('mou_head');

Idiv.style.display = "block";

// Die folgenden Teile sollten zentriert sein, um die Popup-Ebene anzuzeigen

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-out-klickbar

var procbg = document.createelement ("div"); // Erstellen Sie zuerst ein Div

procbg.setattribute ("id", "mybg"); // Definieren Sie die ID der 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)";

// Fügen Sie der Seite die Hintergrundebene hinzu

document.body.appendchild (procbg);

document.body.Style.overflow = "Hidden"; // Scrollbar abbrechen

// Die folgenden Teile erkennen den Drageffekt der Popup-Schicht

var posx;

var posy;

mou_head.onmouseDown = function (e)

{

if (! e) e = window.event; // dh

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; // dh

Idiv.style.left = (ev.clientx - posx) + "px";

Idiv.style.top = (ev.clienty - posy) + "px";

}

}

Funktion closeiV () // Schließen Sie die Popup-Ebene

{

var idiv = document.getElementById ("idiv");

Idiv.style.display = "Keine";

document.body.Style.overflow = "auto"; // Seitenbalkenrollbar wiederherstellen

var body = document.getElementsByTagName ("body");

var mybg = document.getElementById ("mybg");

Körper [0] .Removechild (myBg);

}

<!-Pop Layer startet->

<div id = "idiv" style = "display: keine; Position: absolut; Z-Index: 1000; Hintergrund:#67a3d9;">

<div id = "mou_head" 100px; Höhe = 10px; Z-Index: 1001; Position: absolut; "> Dies wird verwendet, um Dragebenen </div> implementieren zu können

<input type = "button" value = "close" onclick = "closeiv ();" />

</div>

<!-end->

Bei einigen Verschönerungseffekten können Sie sie selbst ändern.

Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.