팝업 중간 버튼이랑 닫기 버튼들이 안먹힙니다..

팝업 중간 버튼이랑 닫기 버튼들이 안먹힙니다..

QA

팝업 중간 버튼이랑 닫기 버튼들이 안먹힙니다..

본문

팝업 중간 버튼이랑 닫기 버튼들이 안먹힙니다.. 

뭔가를 건드렸는데..

뭘수정해야할지 모르겠네요;;

 

 

 

    <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>

아 slick 슬라이더 쓰시는거같은데 slick 파일이 안 들어간거 같네요 제가 원래 slick을 쓰던 페이지에 테스트해봐서 잘 됐나봐요
https://kenwheeler.github.io/slick/
다운 받으셔서 js 파일 추가해보세요

제이쿼리랑 슬릭 넣으니깐 잘되네요..

 

<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>

답변을 작성하시기 전에 로그인 해주세요.
전체 299
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT