HTML·CSS야
배경희미해지는 레이어 팝업
administrators
2010. 6. 10. 17:21
<script> function _ID(obj){return document.getElementById(obj)} /*** 레이어 팝업창 띄우기 ***/ function popupLayer(s,w,h) { if (!w) w = 561; if (!h) h = 396; var pixelBorder = 0; var titleHeight = 0; // w += pixelBorder * 2; // h += pixelBorder * 2 + titleHeight; var bodyW = document.body.clientWidth; var bodyH = document.body.clientHeight; var posX = (bodyW - w) / 2; var posY = (bodyH - h) / 2; hiddenSelectBox('hidden'); /*** 백그라운드 레이어 ***/ var obj = document.createElement("div"); with (obj.style){ position = "absolute"; left = 0; top = 0; width = "100%"; height = document.body.scrollHeight; backgroundColor = "#000000"; filter = "Alpha(Opacity=50)"; opacity = "0.5"; } obj.id = "objPopupLayerBg"; document.body.appendChild(obj); /*** 내용프레임 레이어 ***/ var obj = document.createElement("div"); with (obj.style){ position = "absolute"; left = posX + document.body.scrollLeft; top = posY + document.body.scrollTop; width = w; height = h; backgroundColor = "#000000"; border = "0px solid #000000"; } obj.id = "objPopupLayer"; document.body.appendChild(obj); /*** 타이틀바 레이어 ***/ var bottom = document.createElement("div"); with (bottom.style){ position = "absolute"; width = w - pixelBorder * 2; height = titleHeight; left = 0; top = h - titleHeight - pixelBorder * 3; padding = "2px 0 0 0"; textAlign = "right"; backgroundColor = "#000000"; color = "#ffffff"; font = "bold 11px tahoma"; } bottom.innerHTML = "<a href='javascript:closeLayer();'><font color=#FF0000>CLOSE</font></a> "; obj.appendChild(bottom); /*** 아이프레임 ***/ var ifrm = document.createElement("iframe"); with (ifrm.style){ width = w - 0; height = h - pixelBorder * 0 - titleHeight - 0; //border = "3 solid #000000"; } ifrm.frameBorder = 0; ifrm.src = s; //ifrm.className = "scroll"; obj.appendChild(ifrm); } function closeLayer() { hiddenSelectBox('visible'); _ID('objPopupLayer').parentNode.removeChild( _ID('objPopupLayer') ); _ID('objPopupLayerBg').parentNode.removeChild( _ID('objPopupLayerBg') ); } function hiddenSelectBox(mode) { var obj = document.getElementsByTagName('select'); for (i=0;i<obj.length;i++){ obj[i].style.visibility = mode; } } </script> <script language ="javascript"> function goEvtApp( url ) { popupLayer( url , 1024, 600); } </script> <table height="100%"> <tr><td> <!-- popupLayer("출력할 URL",WIDHT,HEIGHT); --> <a href ="#" onClick ="goEvtApp('http://www.naver.com'); return false">레이어 팝업<a> 이렇게 사용하면 됩니다. </td> </tr> </table> [출처] 레이어 팝업 ( 배경 흐려지면서...)|작성자 VIN http://blog.naver.com/goysb?Redirect=Log&logNo=80066674607