[ js ] 하루동안 이 창을 열지 않음(하루 그만보기) 기능 구현_팝업,레이어팝업

쿠키를 이용해 오늘 하루 그만보기(하루동안 이 창을 열지 않음) 기능을 구현 할 수 있다.

이는 팝업, 레이어팝업 등의 공지사항에 쓰면 유용할 것 같다.

* 체크 및 닫기 후 다시 창을 띄우기 위해선 인터넷 -> 쿠키 및 사용 기록 삭제를 해주면 된다.(ctrl+shift + delete)

​

[ html ]

<script type="text/javascript" src="<c:url value='/js/test/popupToday.js'/>"></script>
...
<div id="today-pop"></div>

-------팝업 html 일부
<!-- <input type="checkbox" onclick="javascript:closeWin('today-pop', 1);"/>하루동안 이 창을 열지 않음  -->
<input type="checkbox" onclick="javascript:closeWinAt00('today-pop', 1);"/>오늘만 이 창을 열지 않음

[ js ]

todayPopup();

//팝업창 생성
function todayPopup() {
	var blnCookie    = getCookie( 'today-pop' );

//쿠키 가져와서 Y일때 팝업창 생성
	if( blnCookie != "Y") { 
	var url = getContextPath() + '/test/popupToday.do';

    $.ajax({
		beforeSend : function(jqXHR) {
            jqXHR.setRequestHeader("AJAX", true);
        },
		type: "get",
		url: url,
		dataType: "html",
		traditional: true,
		success: function(result){
			$("#today-pop").html(result).show();
		},
		error: function( jqXHR, textStatus, errorThrown ) {
			callAlert('fail', jqXHR.statusText );
		}
	});
  }
}

//오늘만 창 열지 않음 - 체크박스 
function closeWinAt00(winName, expiredays) {
	   setCookieAt00( winName, "Y" , expiredays); // Y-로 설정
	}

//하루동안 이 창을 열지 않음  - 체크박스 
//function closeWin(winName, expiredays) {   
//   setCookie( winName, "Y" , expiredays);   
//}  


//쿠키 가져오기
function getCookie( name ) {
   var nameOfCookie = name + "=";
   var x = 0;
   while ( x <= document.cookie.length )
   {
       var y = (x+nameOfCookie.length);
       if ( document.cookie.substring( x, y ) == nameOfCookie ) {
           if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
               endOfCookie = document.cookie.length;
           return unescape( document.cookie.substring( y, endOfCookie ) );
       }
       x = document.cookie.indexOf( " ", x ) + 1;
       if ( x == 0 )
           break;
   }
   return "";
}

//00:00 시 기준 쿠키 설정하기 - 오늘만 이 창을 열지 않음
//expiredays 의 새벽  00:00:00 까지 쿠키 설정
function setCookieAt00( name, value, expiredays ) {
 var todayDate = new Date();
 todayDate = new Date(parseInt(todayDate.getTime() / 86400000) * 86400000 + 54000000);
 if ( todayDate > new Date() )
 {
 expiredays = expiredays - 1;
 }
 todayDate.setDate( todayDate.getDate() + expiredays );
  document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}


// 24시간 기준 쿠키 설정하기  - 하루동안 이 창을 열지 않음 
// expiredays 후의 클릭한 시간까지 쿠키 설정  
//function setCookie( name, value, expiredays ) {   
//   var todayDate = new Date();   
//   todayDate.setDate( todayDate.getDate() + expiredays );   
//   document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"   
//}  

 //팝업창 닫기
    $('.btnClose').on({
        "click":function() {
            $(this).closest('.popup').remove(); //팝업창 삭제
        }
    });

---

[참고사이트]

https://rocabilly.tistory.com/98