오늘하루 열지않기 팝업
오늘하루 열지않기 팝업
HTML
1
2
3
4
5
6
7
8
9
10
11
<div id="popup">
<div class="popup_wrap">
<div class="popup_body">
<img src="/assets/images/common/popup.png" alt="popup">
</div>
<div class="popup_btn">
<a href="#" class="btn__popup_today_close">오늘하루 보지않음</a>
<a href="#" class="btn__popup_close">닫기</a>
</div>
</div>
</div>
CSS
1
2
3
4
5
6
7
8
#popup{position:relative; display: none;}
#popup::after{content:''; display:block; width:100%; height: 100%; position:fixed; left:0; top:0; background:rgba(0,0,0,0.7); z-index:998;}
#popup .popup_wrap{position:fixed; left:50%; top:50%; z-index:999; transform:translate(-50%, -50%);}
#popup .popup_btn{display:flex; align-items:center; justify-content: space-between; gap:1rem; margin:1rem 0 0;}
#popup .popup_btn a{flex:1 1 1%; display:block; height:45px; line-height:45px; text-align:center; color:rgba(255,255,255,.6); border-radius:45px; background:rgba(0,0,0,0.5); transition: background .3s, color .3s;}
#popup .popup_btn .btn__popup_today_close{flex:1 1 65%;}
#popup .popup_btn .btn__popup_close{flex:1 1 35%;}
#popup .popup_btn a:hover{background:rgba(0,0,0,1); color:rgba(255,255,255,1);}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(function(){
// 팝업 쿠키 설정
function setCookie( name, value, expiredays ) {
let todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
// 쿠키 설정에 따른 팝업 노출 유무
let cookiedata = document.cookie;
if ( cookiedata.indexOf("ncookie=done") < 0 ){ // 저장된 쿠키명
$('#popup').show();
} else {
$('#popup').remove();
}
// 닫기 클릭
$('#popup .btn__popup_close').on( "click", function(e){
e.preventDefault();
$('#popup').remove();
});
// 오늘하루 보지않음 클릭
$('#popup .btn__popup_today_close').on( "click", function(e){
e.preventDefault();
setCookie( "ncookie", "done" , 7 ); // 저장될 쿠키명 , 쿠키 value값 , 기간( ex. 1은 하루, 7은 일주일)
$('#popup').remove();
});
});
This post is licensed under CC BY 4.0 by the author.