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

'HTML·CSS야' 카테고리의 다른 글

Free CSS & templates  (0) 2010.06.11
CSS 정리-1  (0) 2010.06.11
이미지로 버튼 효과 주기  (0) 2010.06.10
레이어팝업-1  (0) 2010.06.07
[스크랩] 이미지맵태그_좌표값읽기(coords)  (0) 2010.02.22