안녕하세요 철사마 입니다.

최근 HTML 코딩을 할일이 있는데 기존 소스를 안건드리고 배너 및 메뉴를 추가하려니 힘들더라구요

그래서 레이어로 팝업을 메뉴처럼 쓰려고 검색했는데 딱히 없어서.. 정리해 보았습니다.

코딩을 세군데 추가하면 되겠습니다.

1. HEAD 부분

<!-- Layer popup start -->
    <script language="JavaScript">
		function setCookie( name, value, expiredays ) {
			var todayDate = new Date();
				todayDate.setDate( todayDate.getDate() + expiredays );
				document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
			}

		function closeWin() {
			if ( document.notice_form.chkbox.checked ){
				setCookie( "maindiv", "done" , 1 );
			}
			document.all['divpop'].style.visibility = "hidden";
		}
	</script>
<!-- Layer popup end -->

2. 팝업 부분

<div id="divpop" style="position:absolute;left:100px;top:150px;z-index:200;visibility:hidden;">
 <table width=490px height=340px cellpadding=0 cellspacing=0>
	<tr>
		<td style="border:1px #666666 solid" height=340px align=center bgcolor=white> 
			<a href="http://www.naver.com"><img src="이미리 링크" width=490px height=340px alt="설명설명"></a>
		</td>
	</tr>
	<tr>
		<td height=10 bgcolor="#000000">
		</td>
	</tr>
	<tr>
		<form name="notice_form">
			<td height=25 align=right bgcolor="#000000" valign=middle>
				<input type="checkbox" name="chkbox" value="checkbox"> <font color=#eeeeee>오늘 하루 이 창을 열지 않음 </font>
				<a href="javascript:closeWin();"> <font color=#eeeeee> <B>[닫기]</B> </font></a>
			</td> 
		</form>
	</tr>
</table>
</div> 

3. 쿠키 스크립트 부분

<script language="Javascript">
	cookiedata = document.cookie;   
	if ( cookiedata.indexOf("maindiv=done") < 0 ){ document.all['divpop'].style.visibility = "visible"; }
		else { document.all['divpop'].style.visibility = "hidden"; }
</script>

생각보다 쉬운거 같긴 한데..

코딩으로 바로 쓰려고 하니 어렵더라구요...

위의 코드를 모두 모은건 아래를 참고해 주세요

<!doctype html>
<html lang="ko">
<head>

<!-- Layer popup start -->
    <script language="JavaScript">
		function setCookie( name, value, expiredays ) {
			var todayDate = new Date();
				todayDate.setDate( todayDate.getDate() + expiredays );
				document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
			}

		function closeWin() {
			if ( document.notice_form.chkbox.checked ){
				setCookie( "maindiv", "done" , 1 );
			}
			document.all['divpop'].style.visibility = "hidden";
		}
	</script>
<!-- Layer popup end -->

</head>
   

   
<body>
   
<!-- POPUP start -->
<div id="divpop" style="position:absolute;left:100px;top:150px;z-index:200;visibility:hidden;">
 <table width=490px height=340px cellpadding=0 cellspacing=0>
	<tr>
		<td style="border:1px #666666 solid" height=340px align=center bgcolor=white> 
			<a href="http://www.naver.com"><img src="이미지링크" width=490px height=340px alt="설명설명"></a>
		</td>
	</tr>
	<tr>
		<td height=10 bgcolor="#000000">
		</td>
	</tr>
	<tr>
		<form name="notice_form">
			<td height=25 align=right bgcolor="#000000" valign=middle>
				<input type="checkbox" name="chkbox" value="checkbox"> <font color=#eeeeee>오늘 하루 이 창을 열지 않음 </font>
				<a href="javascript:closeWin();"> <font color=#eeeeee> <B>[닫기]</B> </font></a>
			</td> 
		</form>
	</tr>
</table>

<script language="Javascript">
	cookiedata = document.cookie;   
	if ( cookiedata.indexOf("maindiv=done") < 0 ){ document.all['divpop'].style.visibility = "visible"; }
		else { document.all['divpop'].style.visibility = "hidden"; }
</script>
<!-- POPUP end -->

</body>
</html>

 

쉽게 복사해서 쓰세요~

+ Recent posts