[Javascript] 팝업창 하루 동안 보지 않기 구현

[Javascript] 팝업창 하루 동안 보지 않기 구현

자바스크립트 팝업창 하루동안 열지 않기 구현

 

 

HTML 코드

<aside class="popup" id="popupWrap">
  <div class="inner" id="popup_1">
    <div class="area">
      <img src="" alt="배너이미지1">
    </div>
    <button type="button" onClick="PopupNoDisplay_1()"><span>하루동안 보지않기</span></button>
    <button type="button" onClick="PopupHide();">[닫기]</button>
  </div>

  <div class="popupbg" style="background:gray;"></div>
</aside>

 

Javascript 코드

$(document).ready(function () {
  $('.popup').show();
  cookiedata = document.cookie;
  if ( cookiedata.indexOf("popup_1=done") < 0 ){ //쿠키 변경 여부 불러오기
  	document.all['popup_1'].style.visibility = "visible";
  }
  else {
  	document.all['popup_1'].style.display = "none";
  }
  PopupBgDisplay();
});

function PopupNoDisplay_1() {
  setCookie("popup_1", "done", 1); //쿠키값 변경
  PopupHide();
}

function PopupHide() { //팝업창 지우기
  $('#popup_1').hide();
  PopupBgDisplay(); 
}

function PopupBgDisplay() {	//팝업창이 없어진 경우 배경(popupbg) 지우기
  cookiedata1 = document.cookie;
  if (cookiedata1.indexOf("popup_1=done") > 0)
  {
  	$("#popupWrap").hide();
  }
}

 

PopupNoDisplay_1() 함수는 쿠키에 하루 종일 보지 않기 체크 여부를 저장하는 함수다.

PopupHide() 함수는 단순히 팝업창을 안 보이게 해주는 함수,

PopupBgDisplay() 함수는 배경을 숨기는 함수인데 팝업창 다시 열지 않기와는 상관없으니 넘어간다.

 

[ 닫기 ] 를 누르면 PopupHide() > PopupBgDisplay() 순으로 진행되고,

[ 하루종일 보지 않기 ] 를 누르면 PopupNoDisplay_1() > PopupHide() > PopupBgDisplay() 순으로 진행된다.

새로고침 등으로 해당 페이지에 다시 들어오게 되면, 쿠키 값을 받아와 팝업창의 display를 none 처리한다.

 

PopupBgDisplay() - CSS로 처리하는 경우는 아래와 같다. 그냥 참고용

if ($("#popup_1").css("display") == "none")
{
	$("#popupWrap").hide();
}

 

javascript로 팝업창 구현 이미지

 

참고)

document.all['popup_n'].style.display = "none" 을

document.all['popup_n'].style.visibility = "hidden" 으로 변경 가능하다. 기능은 돌아간다.

그렇지만, 만약 팝업창이 두 개 이상일 때엔 display:none이 좋다.

 

팝업창이 두 개인 경우를 예로 들었을 때.

두 팝업창 중 왼쪽 팝업창은 하루 동안 보지 않기, 오른쪽 팝업창은 그냥 닫기를 누르게 되면

javascript 팝업창 두 개 이상인 경우

 

아래 사진처럼 자동으로 중앙 정렬되지 않는다.

display:none과 visibility:hidden의 차이

 

아예 none으로 사라지는 게 아니라 hidden으로 숨겨져 있기 때문에

안 보이는 공간이 남아있기 때문이다.

display:none 처리하면 중앙으로 정렬된다.