팝업 중간 버튼이랑 닫기 버튼들이 안먹힙니다..
본문
팝업 중간 버튼이랑 닫기 버튼들이 안먹힙니다..
뭔가를 건드렸는데..
뭘수정해야할지 모르겠네요;;
<style>
#rolling-popup {position: absolute; width: 100vw; height: 1000vh; z-index: 9999999; top: 0; left: 0; background: rgba(0,0,0,0.8);display: flex; justify-content: center; }
#rolling-popup .inner {position: relative; top: 100px;}
#rolling-popup .inner .custom_img {width: 450px; height: 600px; overflow: hidden; background: white;}
#rolling-popup .inner .custom_bt ul {display: flex; justify-content: space-between;}
#rolling-popup .inner .custom_bt ul li {width: 100%; text-align: center; padding: 10px 0; background: #d6d3cd; font-size: 13px;}
#rolling-popup .inner .custom_bt ul li:hover {background: #8f8a7c; color: white; cursor: pointer;}
#rolling-popup .inner .custom_bt ul .on {background: #8f8a7c; color: white; cursor: pointer;}
#rolling-popup .popup-ft {position: relative; z-index: 999999; cursor: pointer; text-align: right; top: 80px;}
#rolling-popup .popup-ft button {border: none; background: none; color: white;margin-left: 20px;}
</style>
<div id="rolling-popup">
<div>
<div class="popup-ft">
<button class="reject 24"><strong>24</strong>시간 동안 다시 열람하지 않습니다.</button>
<button class="close rolling-popup custom_close">
<img src="/img/main/icon_3.png">
</button>
</div>
<div class="slick">
<div class="inner">
<div class="custom_img">
<img src="/img/pop/pop_1.jpg">
<img src="/img/pop/pop_2.jpg">
<img src="/img/pop/pop_3.jpg">
<img src="/img/pop/pop_4.jpg">
<img src="/img/pop/pop_5.jpg">
</div>
<div class="custom_bt">
<ul>
<li class="on">7월 이벤트</li>
<li>점제거이벤트</li>
<li>피니어펌</li>
<li>주름을 쫙 핀다 </li>
<li>시그니처SPA</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
$('.custom_img').slick({
arrows: false,
fade: false,
dots: false,
pauseOnHover: false,
pauseOnFocus: false,
});
$('.custom_bt ul li').click(function() {
var slideNom = $(this).index();
$('.custom_img').slick('slickGoTo', slideNom);
$('.custom_bt ul li').removeClass('on');
$(this).addClass('on');
});
$('.custom_close').click(function() {
$('#rolling-popup').css('display', 'none');
});
function setCoooKiee( name, value, expiredays ){
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function getCooKiee( name ){
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length ){
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
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 "";
}
function closePop(name) {
$('#'+name).remove();
}
$("#rolling-popup .reject").click(function() {
setCoooKiee('rolling-popup', 'Y', 1);
closePop('rolling-popup');
});
if ( getCooKiee("rolling-popup") == "Y" ){
closePop('rolling-popup');
}
답변 2
스크립트가 안 닫혔네요
마지막에 추가해주세요
</script>
제이쿼리랑 슬릭 넣으니깐 잘되네요..
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>