Dieser Artikel beschreibt die vollständige Implementierungsmethode der dronen und geschlossenen Div-Schicht von JS Pop-up. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> js taucht eine Div -Ebene auf, die gezogen und geschlossen werden kann </title>
<Styles>
Html, Körper {Höhe: 100%; Überlauf: versteckt;}
Körper, Div, H2 {Rand: 0; Polsterung: 0;}
Körper {Schrift: 12px/1,5 Tahoma;}
Center {Padding-Top: 10px;}
Taste {Cursor: Zeiger;}
#Win {Position: absolut; ober: 50%; links: 50%; Breite: 400px; Höhe: 200px; Hintergrund: #ffff; Rand: 4px solide #f90; Margin: -102px 0 0 -202px; Anzeige: Keine;}
H2 {Schriftgröße: 12px; Höhe: 18px; Text-Align: Right; Hintergrund: #fc0; Border-Bottom: 3px Solid #f90; Polsterung: 5px; Cursor: Move;}
H2 span {color:#f90;
</style>
<Script>
window.onload = function ()
{
var owin = document.getElementById ("Win");
var obtn = document.getElementsByTagName ("button") [0];
var oclose = document.getElementById ("Close");
var oh2 = owin.getElementsByTagName ("H2") [0];
var bdrag = false;
var disx = disy = 0;
obtn.onclick = function ()
{
owin.style.display = "Block"
};
OCLOSE.onclick = Funktion ()
{
owin.style.display = "Keine"
};
oclose.onmouseDown = Funktion (Ereignis)
{
(Ereignis || window.event) .cancelBubble = true;
};
oh2.onmousedown = Funktion (Ereignis)
{
var event = event || Fenster.Event;
BDRAG = wahr;
disx = event.clientX - owin.offsetleft;
Disy = event.clienty - owin.offsettop;
this.setCapture && this.setCapture ();
Return falsch
};
document.onmousemove = Funktion (Ereignis)
{
if (! BDRAG) kehre zurück;
var event = event || Fenster.Event;
var il = event.clientX - disx;
var it = event.clienty - Disy;
var maxl = document.documentElement.clientwidth - owin.Offsetwidth;
var maxt = document.documentElement.clientHeight - owin.offseteight;
il = il <0? 0: il;
il = il> maxl? Maxl: IL;
es = es <0? 0: es;
es = es> Maxt? Maxt: es;
Owin.Style.Margintop = owin.Style.Marginleft = 0;
owin.style.left = il + "px";
owin.style.top = it + "px";
Return falsch
};
document.onmouseUp = window.onblur = oh2.onloSecapture = function ())
{
BDRAG = false;
oh2.releasecapture && oh2.releascapture ();
};
};
</script>
</head>
<body>
<div id = "win"> <h2> <span id = "close"> × </span> </h2> </div>
<Center> <button> Pop -Schicht </button> </center>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.