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:
JS muncul lapisan div yang boleh diseret dan boleh ditutup
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