Rumah  >  Artikel  >  hujung hadapan web  >  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

WBOY
WBOYasal
2016-05-16 16:14:00951semak imbas

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:





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




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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn