네이티브 js 팝업 레이어와 그 안의 창은 centered_javascript 기술입니다.

코드 복사 코드는 다음과 같습니다. New Document * { padding:0px; margin:0px; } #Idiv { width:900px; height:auto; position:absolute; z-index:1000; border:2px solid #ffffff; background:#ffffff; } 点击关闭层 document.documentElement 的区别 document.documentElement 的区别 点击打开弹出层！ function show() { var Idiv=document.getElementById("Idiv") ; Idiv.style.display="block"; //다음 부분은 팝업 레이어를 중앙에 배치해야 합니다 Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/ 2 document .documentElement.scrollLeft "px"; //alert(document.body.scrollTop) var aa_scrollTop = document.documentElement.scrollTop || document.body.scrollTop Idiv.style.top=(document.documentElement.clientHeight-Idiv.clientHeight)/2 aa_scrollTop "px"; //여기서 팝업 레이어가 왼쪽과 오른쪽에 집중되어 있는데 문제가 있습니다. 높이가 중앙에 표시되지 않아 //일부가 보이지 않으므로 아래에 임시로 margin-top을 추가합니다 //다음 부분은 페이지 전체를 회색으로 만들고 unclickable 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(opacity=70 )"; //스크롤 막대 취소 document.body.appendChild(procbg); document.body.style .overflow ="auto"; //다음 부분은 레이어의 팝업 드래그 효과를 구현합니다. (레이어 내에서 div 이동을 팝업하려면 다음 로그아웃을 제거하면 됩니다.) / * var posX; var posY; Idiv.onmousedown=function(e ) { if(!e) e = window.event; e.clientX -parseInt(Idiv.style.left); posY = e.clientY -parseInt(Idiv.style.top); document.onmousemove = } document.onmouseup =function() { document.onmousemove =null; } function mousemove(ev) { if(ev==null) ev = window.event;/ /IE Idiv.style.left = (ev.clientX - posX) "px"; Idiv.style.top = (ev.clientY - posY) "px" }*/ } function 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"; 위의 팝업 레이어를 만들고 나만의 로딩 기능을 만드세요.페이지가 로드되었는지 확인하고 완료 후 loading.gif를 숨깁니다. 새 문서 function show(addressImg, img_w, img_h) { //페이지 높이 가져오기 var h = (document.documentElement.scrollHeight > document.documentElement.clientHeight) ? document .documentElement.scrollHeight : document.documentElement.clientHeight; //페이지 너비 가져오기 var w = (document.documentElement.scrollWidth > document.documentElement.clientWidth) ? 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(opacity=70)"; //스크롤바 취소 document.body.appendChild(procbg); .style.overflow = "auto "; var pimg = document.createElement("img"); //img 생성 pimg.setAttribute("id", "bg_img") ; //div ID 정의 pimg.setAttribute("src", addressImg); //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); } function 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'); >document.onreadystatechange = subSomething;//페이지 로딩 상태가 변경될 때 이 메서드를 실행합니다. function subSomething() { if (document.readyState == "complete") { //페이지 로딩 시 상태가 완전히 완료되면 closeDiv(); } }

네이티브 js 팝업 레이어와 그 안의 창은 centered_javascript 기술입니다.

관련 기사