<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