[jQuery] 레이어 팝업 오늘 하루 그만보기 쿠키 설정

이 포스팅은 레이어 팝업 예제이므로, 상황에 맞게 변수명 등을 변경해서 사용해야 함!

레이어 팝업 구현 화면

 

요즘 웹사이트에서 자주 볼 수 있는 레이어 팝업.

일반 팝업(윈도우창)보다 깔끔하고, 일반 팝업인 경우 특정 브라우저에서의 차단기능으로 팝업창이 뜨지않는 경우가 있기 때문에 레이어 팝업을 자주 사용한다.

 

 

 

html 부분

<!-- html -->
<div id="pop">
        <div class="cont">
            <p>레이어 팝업</p> 
            <a href="#"><img class="thumb" src="이미지경로" usemap="#pop" /></a>
        </div>
        <div class="close">
            <form method="post" action="" name="pop_form">
                <span id="check"><input type="checkbox" value="checkbox" name="chkbox" id="chkday"/><label for="chkday">오늘 하루동안 보지 않기</label></span>
                <button id="popup-close" style="float:right">닫기</button>
            </form>
        </div>
</div>

 

css 부분

#pop {
	    height: 600px;
	    width: 400px;
	    border: 1px solid black;
	    box-shadow: 3px 3px 7px 1px grey;
	    background-color: white;
	    z-index: 9999;
	    margin-left: 36%;
	    margin-top: 6%;
	    position: fixed;
	}

 

 

Js 부분

var $popupList = {

	/**
	 * 초기화
	 */
	init : function() {
		this.fnAddEventListener();
		
	},
    
    /**
	 * 이벤트 등록
	 */
	fnAddEventListener : function() {

    //팝업창 하루 안보기 체크박스
    $("input[type='checkbox']").off("click").on("click",function() {
		$this.fnOnedayClose( this );
	});
	
	
    //닫기 클릭
	$('#popup-close').off("click").on("click", function(e) {
		e.preventDefault();  //이벤트 막기
		$("#pop").hide();
	});
	
    
    },
    
    
   // 팝업창 하루 안보기 
	fnOnedayClose : function(el) {
		if($(el).is(":checked")) {
			this.setCookie("popupYN", "N", 1);
			$("#pop").hide();
		}	
	},
	
    //쿠키 설정
	setCookie : function(name, value, expiredays) {
		var date = new Date();
        date.setDate(date.getDate() + expiredays);
        document.cookie = escape(name) + "=" + escape(value) + "; expires=" + date.toUTCString();

	}
    
};

$(function(){
	$popupList.init();
});

 

 

부모창 Js 부분

 

var $popupType = {

$poplist : $('#popup-list'),   //팝업 뿌려줄 영역	
    
    //팝업 보여주기 함수 실행
    fnShowPopup : function() {
		var cookieCheck = this.getCookie("popupYN");
		if (cookieCheck != "N") {
				$.ajax({
				type: 'GET',
			    url: 'popup',
			    dataType: 'html',
			    success: function(data) {
					$popupType.$poplist.html(data);	
					
				},
			    error: function(request, status, error) {
			    	console.log('code:' + request.status + '\n' + 'error:' + error);
			    }, 
			});
		}

	},
	
	//쿠키 설정
	getCookie : function(name) {
		var cookie = document.cookie;
		
		if(document.cookie != "") {
			var cookieArray = cookie.split("; ");
			for(var i in cookieArray) {
				var cookieName = cookieArray[i].split("=");
				
				if(cookieName[0] == "popupYN") {
					return cookieName[1];
				}
			}
		}
		return;
	}
    
    
 };   
 
 $(function(){
	$popupType.init();
});

 

참고 1.  getCookie function이 호출될 때, console.log(cookie)를 찍어보면 아래와 같이 찍힌다.

 

참고 2. 브라우저의 쿠키에 대한 정보를 가져오고 싶거나, 테스트 중이라서 임의로 쿠키를 삭제해야 할 때

아래 사진 처럼 크롬 개발자도구(F12) 들어가서 볼 수 있다.