jquery Cookie를 활용해 일주일간 보지않기, 하루 보지않기 등 특정 기간동안 뜨지 않는 팝업창을 구현하는 방법을 구현하려고 합니다.
- 우선 팝업창을 모달을 생성해주시고, 처음 페이지 들어가면 항상 팝업창을 띄울 수 있게 코드를 작성 해줍니다.
<div class="modal" tabindex="-1" role="dialog" id="popup_modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">테스트 모달 입니다.</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary week_close_btn">일주일 간 보지않기</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
<script>
// 처음에 modal 열어두기
$(document).ready(function(){
$("#popup_modal").modal('show');
}
</script>아래와 같은 형태의 모달을 띄워줍니다.
- 이제 쿠키를 활용해 ‘일주일 간 보지않기’를 실행하기위해 jquery Cookie를 추가합니다.
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"
></script>- ‘일주일간 보지 않기’ 버튼을 눌렀을 때, 팝업창을 닫으면서 expire 값을 7로 주어 쿠키를 생성해줍니다.
<script>
$('.week_close_btn').click(function () {
layerPopupHide(1)
})
function layerPopupHide(state) {
$('#popup_modal').modal('hide')
if (state === 1) {
//cookie처리
if ($.cookie('testCookie') == undefined) {
//쿠키가 없는 경우 testCookie 쿠키를 추가
// expires값으로 7을 주어 7일 후 쿠키가 삭제되도록 설정
// path값을 '/'로 주면 해당사이트 모든페이지에서 유효한 쿠키를 생성
$.cookie('testCookie', 'Y', { expires: 7, path: '/' })
}
}
}
</script>- 처음 페이지 들어왔을 때, 쿠키가 있는지 확인하고 모달 띄워주도록 스크립트 수정해줍니다.
<script>
$(document).ready(function(){
if($.cookie('testCookie') == undefined){
$("#popup_modal").modal('show');
}
}
</script>이제 ‘일주일간 보지 않기’ 버튼을 누르면, ‘testCookie’라는 쿠기가 생성되며 모달이 뜨지 않습니다.
- 콘솔창에서 application > storage > cookies 삭제하면 팝업창이 다시 뜨는 것을 확인할 수 있습니다.
