[자바스크립트] 오늘 하루 열지 않기 / 닫기 (레이어 팝업)

map 태그를 사용해서 이미지맵을 만들어 각각의 버튼에  함수를 호출하도록 하였습니다.

 

자바스크립트에서 쿠키의 이름, value, 기간을 체크해 레이어 팝업을 visible / hidden 할지 체크합니다.

닫기 버튼을 클릭했을 경우는 레이어 팝업을 숨김 처리하고, 하루 동안 열지 않기를 체크하면 쿠키를 저장해서

다음 페이지에 진입 시 하루 동안 레이어 팝업을 노출하지 않게 됩니다.

레이어 팝업 영역을 확인하시고 소스를 응용해서 사용하시면 됩니다.

 

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<script language="JavaScript">
	(function($){ 
		$(document).ready(function(e) { 
			$('img[usemap]').rwdImageMaps(); 	
		}); 
	})(jQuery); 
	function setCookie( name, value, expiredays ) {
		var todayDate = new Date();
		todayDate.setDate( todayDate.getDate() + expiredays ); 
		document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
	}
	function closePop() {
		setCookie( "popdiv", "done" , 1 );
		document.all['pop'].style.visibility = "hidden";
	}
	function layer_notice() {
		document.all['pop'].style.visibility = "hidden";
	}
</script>
<div id="pop">
	<div>
		<img src="./tt.png"  usemap="#Map9" />
		<map name="Map9" id="map9">
			<area shape="rect" coords="23,273,86,300" href="javascript:layer_notice()" />
			<area shape="rect" coords="401,279,415,293" href="javascript:closePop()" />
		</map>
	</div>
</div>
<script language="Javascript">
	cookiedata = document.cookie;   
	if ( cookiedata.indexOf("popdiv=done") < 0 ){     
		document.all['pop'].style.visibility = "visible";
	}else {
		document.all['pop'].style.visibility = "hidden";
	}
</script>

 

닫기 후 페이지 새로고침, 마지막엔 하루동안 열지않기 체크

 

이미지 맵 좌표 구하는 글은 아래에 링크로 남겨 놓겠습니다.

https://jh-tr.tistory.com/47