[JavaScript] 모달 창 하루 동안 안 열기

회사에서 공부하면서 사이트마다 자주 쓰는 모달 창 하루 동안 열지 않기 화면을 만들어 보았다.

 

먼저 jsp에 그려주는 소스이다.

<div class="modal fade" id="myModal" role="dialog">
	<div class="modal-dialog">

		Modal content
		<div class="modal-content">
			<div class="modal-body">
				<p> modal 테스트 중입니다. </p>
			</div>
			<div class="modal-footer">
				<div style="padding-right: 250px; text-decoration: underline; cursor: pointer;"> 
					<span class="modal-today-close"> 오늘 하루 동안 보지 않기 </span> 
				</div>
				<a href="#" class="btn btn-default" data-dismiss="modal">닫기</a>
			</div>
		</div>

	</div>
</div>

 

쿠키를 이용하여 오늘 하루 안보기 버튼을 활성화해야 한다.

 

setCookie 메소드를 통해 

 

쿠키 이름과 expires(유효시간)을 쿠키에 저장시킨다. 

 

브라우저는 설정된 유효 일자까지 쿠키를 유지하다가, 해당 일자가 도달하면 쿠키를 자동으로 삭제한다.

 

getCookie메소드를 통해 저장된 쿠키 값을 가져옵니다.

function setCookie(name, value, expiredays){
	var today = new Date();

	console.log(today.getDate())

	today.setDate(today.getDate() + expiredays); // 현재시간에 하루를 더함 

	document.cookie = name + '=' + escape(value) + '; expires=' + today.toGMTString();

}
	
function getCookie(name) {

	var cookie = document.cookie;
	
	if (document.cookie != "") {
		var cookie_array = cookie.split("; ");
		console.log(cookie_array)
		for ( var index in cookie_array) {
			var cookie_name = cookie_array[index].split("=");
			if (cookie_name[0] == "mycookie") {
				return cookie_name[1];
			}
		}
	}
	return;
}

 

화면 시작 시 쿠키 값이 있는지 없는지를 확인을 한다.

 

쿠키 값이 없을 시 모달창을 오픈, 있을 시 숨긴다.

$(".modal-today-close").click(function() {
	$("#myModal").modal("hide");
	setCookie("mycookie", 'popupEnd', 1);
})

var checkCookie = getCookie("mycookie");
	
if(checkCookie == 'popupEnd') {
	$("#myModal").modal("hide");
} else {
	$('#myModal').modal("show");	
}

 

 

ko.javascript.info/cookie

쿠키와 document.cookie

쿠키에 관한 자세한 설명은 여기서 살펴보자

 

 

끝!