중앙 DIV_javascript 기술을 위한 JS 팝업 코드

먼저 JS에서 창과 웹 페이지의 여러 크기 속성의 의미를 자세히 설명하겠습니다
document.body.clientWidth(웹 페이지의 표시 영역 너비): 창과 웹 페이지의 크기 속성이 표시되는 영역의 너비를 나타냅니다. 브라우저는 브라우저의 테두리 너비와 세로 스크롤 막대의 너비를 제외하고 웹 페이지를 표시합니다. 브라우저 창 크기에 따라 크기가 변경됩니다.
document.body.clientHeight(웹 페이지 표시 영역 높이): 브라우저의 테두리 너비와 가로 스크롤 막대의 높이를 제외하고 브라우저가 웹 페이지를 표시하는 영역에서 볼 수 있는 높이를 의미합니다. 브라우저 창 크기에 따라 크기가 변경됩니다.
document.body.scrollTop(스크롤되는 웹페이지의 높이): 세로 스크롤바를 당겼을 때 웹페이지에서 주소 표시줄과 메뉴바로 가려지는 부분의 높이를 나타냅니다.
document.body.scrollLeft(스크롤되는 웹페이지의 왼쪽): 가로 스크롤 막대를 당겼을 때 왼쪽 선이 덮는 웹페이지의 왼쪽 너비를 나타냅니다.
이제 프로그램 구현 방법을 분석해 보겠습니다.

우리가 달성하려는 첫 번째 단계는 스크롤 막대가 있는지 여부에 관계없이 레이어가 팝업될 때 절대적으로 중앙에 위치하도록 만드는 것입니다.
1. 표시 영역의 왼쪽과 상단에서 레이어의 위치를 ​​계산합니다.
참고: divId는 가운데에 배치할 레이어를 나타내며 divId.clientWidth는 너비입니다! ＠
var divId = document.getElementById("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2
var v_top=(document.body.clientHeight-divId .clientHeight)/2;
2. DIV의 왼쪽 및 위쪽 속성에 다시 할당
divId.style.top=v_top; >설명 : divId는 DIV 태그의 id 값입니다.
이렇게 하면 이 레이어가 중앙에 표시됩니다.
우리가 달성하려는 두 번째 단계는 스크롤 막대를 드래그할 때 나타나는 레이어를 중앙에 배치하는 것입니다.
사실 아주 간단합니다. 앞서 계산한 왼쪽 여백과 위쪽 여백에 드래그한 너비와 높이만 추가하면 됩니다.
v_left =document.body.scrollLeft;
v_top =document.body.scrollTop;
2. 얻은 값을 DIV
divId.style.left의 왼쪽 및 위쪽 속성에 다시 할당합니다. =v_left ;
divId.style.top=v_top
중앙에 표시됩니다.
전체 코드는 다음과 같습니다.

<title>팝업 레이어가 중앙에 표시됩니다</title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <table width="100%"> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> </table> <div id="mxh" style="position:absolute;left:200px;top:30px;width:200px;height:200px;background -color:navy;border:2px"> </div>중앙에 전시하고 있어요.
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]


원하는 경우 스크롤 막대를 드래그하거나 창 크기를 조정할 때 레이어가 중앙에 표시되도록 하려면 onresize="divcenter();" 및 onscroll="divcenter();"를 추가하면 됩니다. 괜찮을 것입니다. 그러나 표시 효과가 그다지 좋지 않을 수 있습니다. 특히 스크롤 막대를 드래그할 때 효과가 좋은 것과 좋은 것 중 하나일 수 있어 매우 불쾌합니다.