Contoh lengkap lapisan div pop timbul JS yang boleh diseret dan kemahiran closed_javascript

Contoh dalam artikel ini menerangkan kaedah pelaksanaan lengkap lapisan div pop timbul JS yang boleh diseret dan ditutup. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

html,badan{ketinggian:100%;limpahan:tersembunyi;}
body,div,h2{margin:0;padding:0;}
badan{font:12px/1.5 Tahoma;}
tengah{padding-top:10px;}
butang{kursor:penunjuk;}
#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none; }
h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}
span h2{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}


window.onload = fungsi ()
{
var oWin = document.getElementById("menang");
var oBtn = document.getElementsByTagName("butang")[0];
var oClose = document.getElementById("close");
var oH2 = oWin.getElementsByTagName("h2")[0];
var bDrag = palsu;
var disX = disY = 0;
oBtn.onclick = fungsi ()
{
oWin.style.display = "sekat"
};
oClose.onclick = fungsi ()
{
oWin.style.display = "tiada"

};
oClose.onmousedown = fungsi (acara)
{
(acara || window.event).cancelBubble = benar;
};
oH2.onmousedown = fungsi (peristiwa)
{
var acara = peristiwa ||. window.event;
bDrag = benar;
disX = event.clientX - oWin.offsetLeft;
disY = event.clientY - oWin.offsetTop; this.setCapture && this.setCapture(); kembali palsu
};
document.onmousemove = fungsi (peristiwa)
{
jika (!bDrag) kembali;
var acara = peristiwa ||. window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
var maxT = document.documentElement.clientHeight - oWin.offsetHeight
iL = iL < 0 : iL;
iL = iL > maxL : iL; iT = iT < 0 : iT;
iT = iT > maxT : iT;

oWin.style.marginTop = oWin.style.marginLeft = 0;
oWin.style.left = iL "px";
oWin.style.top = iT "px"; kembali palsu
};
document.onmouseup = window.onblur = oH2.onlosecapture = fungsi ()
{
bSeret = palsu; oH2.releaseCapture && oH2.releaseCapture();
};
};

×

Lapisan pop timbul

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.