Rumah
hujung hadapan web
tutorial js
Contoh lengkap lapisan div pop timbul JS yang boleh diseret dan kemahiran closed_javascript
hujung hadapan web
tutorial js
Contoh lengkap lapisan div pop timbul JS yang boleh diseret dan kemahiran closed_javascript
Contoh lengkap lapisan div pop timbul JS yang boleh diseret dan kemahiran closed_javascript
js
Boleh ditutup
Boleh diseret
timbul
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();
};
};