드래그할 수 있는 JS 팝업 div 레이어의 전체 예와 Closed_javascript 기술

이 글의 예시에서는 드래그 앤 클로즈가 가능한 JS 팝업 div 레이어의 전체 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

<스타일>
html,body{높이:100%;오버플로:숨김;}
body,div,h2{margin:0;padding:0;}
본문{글꼴:12px/1.5 Tahoma;}
center{padding-top:10px;}
버튼{커서:포인터;}
#win{위치:절대;위쪽:50%;왼쪽:50%;너비:400px;높이:200px;배경:#fff;테두리:4px 단색 #f90;여백:-102px 0 0 -202px;디스플레이:없음; }
h2{font-size:12px;height:18px;text-align:right; background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}
h2 범위{색상:#f90;커서:포인터;배경:#fff;테두리:1px 솔리드 #f90;패딩:0 2px;}


window.onload = 함수()
{
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 = 함수()
{
oWin.style.display = "차단"
};
oClose.onclick = 함수()
{
oWin.style.display = "없음"

};
oClose.onmousedown = 함수(이벤트)
{
(이벤트 || window.event).cancelBubble = true;
};
oH2.onmousedown = 함수(이벤트)
{
var 이벤트 = 이벤트 || window.event;
bDrag = true;
disX = event.clientX - oWin.offsetLeft;
disY = event.clientY - oWin.offsetTop
this.setCapture && this.setCapture()
거짓을 반환
};
document.onmousemove = 함수(이벤트)
{
if (!bDrag) return;
var 이벤트 = 이벤트 || 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 ? 0 : iL;
iL = iL > maxL : iL; iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;

oWin.style.marginTop = oWin.style.marginLeft = 0;
oWin.style.left = iL "px";
oWin.style.top = iT "px"
거짓을 반환
};
document.onmouseup = window.onblur = oH2.onlosecapture = 함수()
{
b드래그 = 거짓
oH2.releaseCapture && oH2.releaseCapture();
};
};

×

팝업 레이어