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

 

 

 

 

 

홈페이지에 공지사항이나 이벤트들을 특정 기간동안 안내해줘야 하는 경우가 있다.

그럴때 레이어 팝업이나 팝업창으로 내용을 띄워주는데

이 팝업들을 특정 기간동안 띄우거나 '더 이상 보지않기' / '일주일간 보지않기' 등 기능을 적용해보려고 한다.

 

 

 

 

 

 

 

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

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

 

 

 

 

 

 

 

작업 순서는
1) 레이어 팝업의 레이아웃을 HTML로 구성을 짠다.

2) CSS로 팝업창 디자인을 만든다.

3) 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는 어떻게 쓰는거지?