팝업(Popup)창 / 모달윈도우 / 레이어팝업/오늘은더이상보지않기 / 7일동안(일주일동안) 보지않기 - 포폴

 

 

 

 

 

홈페이지에 공지사항이나 이벤트들을 특정 기간동안 안내해줘야 하는 경우가 있다.
그럴때 레이어 팝업이나 팝업창으로 내용을 띄워주는데 이 팝업들을 특정 기간동안 띄우거나 '더 이상 보지않기' / '일주일간 보지않기' 등 기능을 적용해보려고 한다.

 

 

 

 

 

🚀 팝업창 / 모달창 차이가 뭐지?

[IT 용어정리] 팝업창 VS 모달창, 차이점은 뭘까?

 

 

 

 

 

작업 순서는
▶️ 레이어 팝업의 레이아웃을 HTML로 구성을 짠다

▶️CSS로 팝업창 디자인을 만든다.

▶️  js에 '더 이상 보지않기' 쿠키 설정과 마감 일자를 if 문으로 넣어주면 된다.

 

 

 

여기서 만들 팝업창 예시 이미지

 

 

 

 

 

 

1. 레이어 팝업창 레이아웃 HTML

<div id="popup_layer">
  <div class="popup_box">
      <!--팝업 컨텐츠 영역-->
      <div class="popup_cont">
          <h2>[ How to make Popup ]</h2>
          <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
          when an unknown printer took a galley of type and 
          scrambled it to make a type specimen book.
          </p>
      </div>
      <!--팝업 버튼 영역-->
      <div class="popup_btn">
          <!--하루동안 보지않기-->
          <a id="chk_today" href="javascript:closeToday();" class="close_day">Do not open for a day</a> 
          <!--7일간 보지않기-->
          <!-- <a id="chk_today" href="javascript:closeToday();" class="close_day">Do not open for 7 days</a>-->
          <a href="javascript:closePop();">Close</a>
      </div>
  </div>
</div>

 

 

 

 

2. CSS로 레이어 팝업창 디자인

#popup_layer {position:fixed;top:0;left:0;z-index: 10000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);} 
/*팝업 박스*/
.popup_box{position: relative;top:50%;left:50%; width:550px;transform:translate(-50%, -50%);z-index:1002;box-sizing:border-box;background:#fff;box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-webkit-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);}
/*컨텐츠 영역*/
.popup_box .popup_cont {padding:50px;line-height:1.4rem;font-size:14px;word-break: break-word;}
.popup_box .popup_cont h2 {padding:15px 0;color:#333;margin:0;}
.popup_box .popup_cont p{ border-top: 1px solid #666;padding-top: 30px;}
/*버튼영역*/
.popup_box .popup_btn {display:table;table-layout: fixed;width:100%;height:70px;background:#5d5d5d;word-break: break-word;}
.popup_box .popup_btn a {position: relative; display: table-cell; height:70px; color:#fff; font-size:17px;text-align:center;vertical-align:middle;text-decoration:none; background:#102c5c;}
.popup_box .popup_btn a:before{content:'';display:block;position:absolute;top:26px;right:29px;width:1px;height:21px;background:#fff;-moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.popup_box .popup_btn a:after{content:'';display:block;position:absolute;top:26px;right:29px;width:1px;height:21px;background:#fff;-moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.popup_box .popup_btn a.close_day {background:#5d5d5d;}
.popup_box .popup_btn a.close_day:before, .popup_box .popup_btn a.close_day:after{display:none;}
/*오버레이 뒷배경*/
.popup_overlay{position:fixed;top:0px;right:0;left:0;bottom:0;z-index:1001;;background:rgba(0,0,0,0.5);}    

 

 

 

 

 

 

 

 

 

✨Point!

.popup_overlay속성에 position: fixed를 넣어서

홈페이지가 세로로 스크롤이 길때 팝업창이 제자리에 떠 있도록 설정한다.

 

---

 

.popup_box에 

position: absolute; / top:50%; / left:50%;

transform:translate(-50%, -50%);

팝업창이 화면 가운데 배치하도록 설정했다.

---

 

.popup_btn 속성에

display:table / table-layout: fixed

버튼이 몇개로 늘어나도 간격 맞춰 정렬되도록 했다.

 

위에 버튼 효과를 보기위해서는 .popup_btn a속성에

display: table-cell 를 꼭 넣어야한다.

 

 

 

 

 

 

3 js에 쿠키 설정과 마감 일자를 if 문으로 넣기.

 

[ ★ 팝업창 기간 쿠키설정하는 자바스크립트 ]

// 쿠키 생성
function setCookie( name, value, expiredays ) {  // 쿠키저장
	var todayDate = new Date();  //date객체 생성 후 변수에 저장
	todayDate.setDate( todayDate.getDate() + expiredays ); 
   	 // 시간지정(현재시간 + 지정시간)
	document.cookie = name + "=" + value + "; path=/; expires=" + todayDate.toUTCString() + ";"
	//위 정보를 쿠키에 굽는다
} 

 

 

 

 

[ 하루 동안 팝업창 듣기 자바스크립트 ]

$(function(){
	$(".popup_box").draggable({containment:'parent', scroll:false}); // 레이어 팝업 창 드래그 가능
	//{containment:'parent', scroll:false} 화면 영역 밖으로 드래그 안됌.
                
	if(document.cookie.indexOf("popToday=close") < 0 ){      // 쿠키 저장여부 체크
		document.getElementById("popup_layer").style.display = "block";
		}else {
		document.getElementById("popup_layer").style.display = "none"; 
		}
	});
             
//오늘하루만보기 닫기버튼 스크립트
function closeToday() { 
	setCookie( "popToday", "close" , 1  ); 
	$("#popup_layer").css("display", "none");
	document.getElementById("popup_layer").style.display = "none";
}
//그냥 닫기버튼 스크립트
function closePop() { 
	document.getElementById("popup_layer").style.display = "none";
}

 

 

[ 일주일 동안 팝업창 듣기 자바스크립트 ]

$(function(){
	$(".popup_box").draggable({containment:'parent', scroll:false}); // 레이어 팝업 창 드래그 가능
	//{containment:'parent', scroll:false} 화면 영역 밖으로 드래그 안됌.
                
	if(document.cookie.indexOf("popToday=close") < 0 ){      // 쿠키 저장여부 체크
		document.getElementById("popup_layer").style.display = "block";
		}else {
		document.getElementById("popup_layer").style.display = "none"; 
		}
	});
             

// 7일동안 닫기버튼 스크립트는 아래 스크립트로 교체
function closeToday() { 
	setCookie( "popToday", "close" , 7 ); 
	$("#popup_layer" ).css("display", "none");
	document.getElementById("popup_layer").style.display = "none";
}
function closePop() { 
	document.getElementById("popup_layer").style.display = "none";
}

 

 

 

 

 

 

 

 

 

Recommand posting for you guys

 

* PHP란 대체 무엇인가..?

* SVN이 뭐죠?

* 팝업창과 모달창이 도대체 어떻게 다른겨...

* git / gitHub는 어떻게 쓰는거지?