jQuery를 이용한 popup 작업중인데요
본문
jQuery 를 활용한 팝업 제어를 작업중입니다.
하루안뜨기 쿠키를 적용이 맘처럼 되지가 않네요.
오른쪽 상단의 X 버튼은 창닫기
왼쪽 하단의 하루안뜨기 체크박스를 누르면 창닫히면서 쿠키 작동
사용된 코드는 다음과 같습니다.
https://www.happyjung.com/demo/jquery_popup/ 에서 내용 테스트가 가능합니다.
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset="utf-8">
<title>jQuery 활용한 팝업</title>
<link rel="stylesheet" href="./swiper2.min.css" media="all">
<link rel="stylesheet" href="./popup_swiper.css" media="all">
<script src='./jquery-1.12.4.min.js'></script>
<script src="./swiper.min.js"></script>
<script src="./jquery.cookie.js"></script>
</head>
<body>
<div id="popup_swiper">
<div class="popupInner" style="width: 1080px; height:644px;">
<img src="./close.png" alt="팝업닫기" class="btn_close" onClick="$('#popup_swiper').hide();"><!-- set_cookie('popup_swiper_cookie','doned',1); -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-title="이미지1"><a href="#"><img src="./img1.jpg" class="img" alt="" style="display: block;"/></a></div>
<div class="swiper-slide" data-title="이미지2"><a href="#"><img src="./img2.jpg" class="img" alt="" style="display: block;"/></a></div>
<div class="swiper-slide" data-title="이미지3"><a href="#"><img src="./img3.jpg" class="img" alt="" style="display: block;"/></a></div>
<div class="swiper-slide" data-title="이미지4"><a href="#"><img src="./img4.jpg" class="img" alt="" style="display: block;"/></a></div>
<div class="swiper-slide" data-title="이미지5"><a href="#"><img src="./img5.jpg" class="img" alt="" style="display: block;"/></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div style="padding-top:7px; padding-left:10px; height:26px; color:#fff;">
<div id="pop-close">
<input type="checkbox" id="popup_swiper_day" onclick="javascript:closePopupNotToday()">
<label for="popup_swiper_day"><span style="color:#ffffff">하루동안 이 창 열기 않기</span></label>
</div>
</div>
</div>
</div>
<script>
/* 우측 상단 닫기 jQuery */
$(function () {
var popSwiper = new Swiper('#popup_swiper .swiper-container', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '#popup_swiper .swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
var eTit = '';
eTit = $('#popup_swiper .swiper-slide:eq(' + (index+1) + ')').attr('data-title');
return '<span class="' + className + '">' + eTit + '</span>';
},
},
});
});
</script>
<script>
/* 하루안뜨기 jQueyr */
if(getCookie("popup_swiper_cookie")!="Y"){
$("#popup_swiper").show('fade');
}
function closePopupNotToday(){
setCookie('popup_swiper_cookie','Y', 1);
$("#popup_swiper").hide('fade');
}
function setCookie(name, value, expiredays) {
var today = new Date();
today.setDate(today.getDate() + expiredays);
document.cookie = name + '=' + escape(value) + '; path=/; expires=' + today.toGMTString() + ';'
}
function getCookie(name)
{
var cName = name + "=";
var x = 0;
while ( x <= document.cookie.length )
{
var y = (x+cName.length);
if ( document.cookie.substring( x, y ) == cName )
{
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
</script>
</body>
</html>
답변 2
개발자 도구로 보면 쿠키는 정상적으로 생성이 됩니다.
스타일에 #popup_swiper { display:none; } 이걸 추가하시면 정상적으로 작동하지 않을까 싶네요.
와우~~ ^^ 감사합니다.
<img src="./close.png" alt="팝업닫기" class="btn_close" onClick="$('#popup_swiper').hide();">
이부분에 쿠키를 set_cookie 하는 것을 호출하는것 같지 않습니다.
아래에
var fncClose = function(){
$('#popup_swiper').hide();
set_cookie(....
}
를 추가 하시고
<img src="./close.png" alt="팝업닫기" class="btn_close" onClick="javascript:fncClose();">
로 변경하시면 될것 같습니다.
감사합니다. ^^
