이 기사에서는 JS 팝업 구동 가능 및 닫힌 div 계층의 완전한 구현 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> js는 드래그 및 닫을 수있는 div 레이어를 팝업합니다 </title>
<스타일>
HTML, BODY {높이 : 100%; 오버플로 : 숨겨진;}
Body, Div, H2 {마진 : 0; 패딩 : 0;}
바디 {font : 12px/1.5 Tahoma;}
센터 {패딩 탑 : 10px;}
버튼 {커서 : 포인터;}
#WIN {위치 : 절대; 상단 : 50%; 왼쪽 : 50%; 너비 : 400px; 높이 : 200px; 배경 : #ffff; 경계 : 4PX Solid #F90; 마진 : -102px 0 0-202px; 디스플레이 : 없음;}
h2 {font-size : 12px; 높이 : 18px; 텍스트-정렬 : 오른쪽; 오른쪽; 배경 : #fc0; 경계-바닥 : 3px 고체 #f90; 패딩 : 5px; 커서 : 움직임;}
H2 Span {색상 :#f90; 커서 : 포인터; 배경 : #fff; 테두리 : 1px 고체#f90; 패딩 : 0 2px;}
</스타일>
<cript>
Window.onload = function ()
{
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 = function ()
{
owin.style.display = "block"
};
oclose.onclick = function ()
{
owin.style.display = "none"
};
oclose.onmousedown = 함수 (이벤트)
{
(이벤트 || window.event) .CancelBubble = true;
};
OH2.onmousedown = 함수 (이벤트)
{
var event = 이벤트 || Window.event;
bdrag = true;
Disx = event.clientx -Owin.offsetleft;
disy = event.clienty -Owin.offsetTop;
this.setcapture && this.setcapture ();
거짓을 반환하십시오
};
document.onmouseMove = function (이벤트)
{
if (! bdrag) 반환;
var event = 이벤트 || 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? Maxl : IL;
It = it <0? 0 : 그것은;
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 = function ()
{
bdrag = false;
OH2.ReleaseCapture && oh2.releasecapture ();
};
};
</스크립트>
</head>
<body>
<div id = "win"> <h2> <span id = "close"> </span> </h2> </div>
<centre> <버튼> 팝 레이어 </button> </center>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.