코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<헤드>
<title> 새로운 문서 </title>
<meta charset = "utf-8">
<meta http-equiv = "content-type"content = "text/html; charset = utf-8"/>
<meta name = "author"content = "">
<meta name = "keywords"content = "">
<meta name = "description"content = "">
<스타일 유형 = "텍스트/CSS">
*
{
패딩 : 0px;
여백 : 0px;
}
#Idiv
{
너비 : 900px;
높이 : 자동;
위치 : 절대;
Z- 인덱스 : 1000;
국경 : 2px Solid #ffffff;
배경 : #ffffff;
}
</스타일>
</head>
<body>
<div id = "idiv"style = "display : none;">
<a href = "javaScript : void (0)"onclick = "closediv ()"> 레이어를 닫으려면 클릭하십시오
<br/> document.documentElement의 차이 <br/> document.documentElement의 차이
</div>
<div> <a href = "javaScript : void (0)"id = "show"onclick = "show ()"> 팝업 레이어를 열려면 클릭하십시오! </div>
</body>
<script langue = "javaScript">
함수 show ()
{
var idiv = document.getElementById ( "idiv");
idiv.style.display = "블록";
// 팝업 레이어를 표시하려면 다음 부분이 중앙에 있어야합니다.
idiv.style.left = (document.documentElement.clientWidth-Idiv.clientWidth) /2+document.documentELement.ScrollLeft+ "px";
//alert(document.body.scrolltop)
var aa_scrolltop = document.documentElement.scrolltop || Window.PageyOffset || document.body.scrolltop;
idiv.style.top = (document.documentElement.clientHeight-Idiv.clientHeight)/2+AA_SCROLLTOP+"PX";
// 여기에 문제가 있습니다. 팝업 레이어는 왼쪽과 오른쪽 중앙에 있지만 높이가 중앙에 있지 않으며 상단 부분에 표시되어 하나 // 부분이 보이지 않습니다. 따라서 일시적으로 여백 꼭대기를 아래에 추가하십시오.
// 다음 부분은 전체 페이지를 회색으로 클릭 할 수있게 만듭니다
var procbg = document.createElement ( "div"); // 먼저 div를 만듭니다
procbg.setattribute ( "id", "mybg"); // div의 ID를 정의합니다
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "고정";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alpha (불투명도 = 70)";
// 스크롤 바를 취소합니다
document.body.appendChild (ProcBG);
document.body.style.overflow = "Auto";
// 다음 부분은 팝업 레이어의 드래그 효과를 인식합니다 (팝업 레이어에서 DIV를 이동하려면 로그 아웃하고 다음을 제거하십시오).
/*
var posx;
var posy;
idiv.onmousedown = function (e)
{
if (! e) e = Window.event; //즉
posx = e.clientx -parseint (idiv.style.left);
posy = e.clienty -parseint (idiv.style.top);
문서 .OnMousEmove = MousEmove;
}
document.onmouseup = function ()
{
document.onmouseMove = null;
}
기능 MouseMove (EV)
{
if (ev == null) ev = window.event; // 즉
idiv.style.left = (ev.clientx -posx) +"px";
idiv.style.top = (ev.clienty -posy) +"px";
}*/
}
함수 closediv () // 팝업 레이어를 닫습니다
{
var idiv = document.getElementById ( "idiv");
var mybg = document.getElementById ( "MyBG");
document.body.removechild (MYBG);
idiv.style.display = "none";
document.body.style.overflow = "auto"; // 페이지 스크롤 바를 복원합니다
//document.getElementById("mybg").style.display="none ";
}
</스크립트>
</html>
// 위의 팝업 레이어를 변경하고 나만의 로딩 기능을 만듭니다. 페이지가로드되었는지 여부를 결정하고 완료 후로드를 숨 깁니다.
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> 새로운 문서 </title>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
</head>
<body onload = "subsomething ()">
</body>
<script type = "text/ecmascript">
함수 쇼 (addressImg, img_w, img_h) {
// 페이지 높이를 얻습니다
var h = (Document.DocumentElement.ClientHeight> Document.DocumentElement.ClientHeight)? document.documentElement.scrollheight : document.documentElement.clientHeight;
// 페이지 너비를 얻습니다
var w = (document.documentElement.scrollwidth> document.documentElement.clientWidth)? document.documentElement.scrollwidth : document.documentElement.scrollwidth;
var procbg = document.createElement ( "div"); // 먼저 div를 만듭니다
procbg.setattribute ( "id", "mybg"); // div의 ID를 정의합니다
procbg.style.background = "#555";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "고정";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alpha (불투명도 = 70)";
// 스크롤 바를 취소합니다
document.body.appendChild (ProcBG);
document.body.style.overflow = "Auto";
var pimg = document.createElement ( "IMG"); // IMG를 만듭니다
pimg.setattribute ( "id", "bg_img"); // div의 ID를 정의합니다
pimg.setattribute ( "src", wasschimg); // div의 ID를 정의합니다
var img_w = (w -img_w) / 2;
var img_h = (h -img_h) / 2;
pimg.style.top = img_h + "px";
pimg.style.left = img_w + "px";
pimg.style.position = "고정";
pimg.style.opacity = "0.9";
document.getElementById ( "mybg"). AppendChild (PIMG);
}
함수 closediv () // 팝업 레이어를 닫습니다
{
var mybg = document.getElementById ( "MyBG");
document.body.removechild (MYBG);
document.body.style.overflow = "auto"; // 페이지 스크롤 바를 복원합니다
//document.getElementById("mybg").style.display="none ";
}
show ( 'loading/loading3.gif', '100', '100');
hodep.onreadyStateChange = SUBSOMETHENT; // 상태로드 상태가 변경 될 때이 메소드를 실행합니다.
함수 subsomething () {
if (document.readystate == "complete") {// 페이지로드 상태가 완전히 종료되었을 때 입력
폐쇄 ();
}
}
</스크립트>
</html>