팝업 관련 질문 드립니다.

팝업 관련 질문 드립니다.

QA

팝업 관련 질문 드립니다.

본문

안녕하세요 

https://sir.kr/g5_skin/57482?sfl=wr_subject%7C%7Cwr_content&stx=%ED%8C%9D%EC%97%85
이분이 만든 것을 다운로드 하여 적용을 해보니 잘 되기는 합니다.

관리자에서 팝업을 2개 올렸는데 실제로 디버깅을 해 보면 4개로 나옵니다  혹시 이거 어떻게 해결하나요
https://sinjinkyu.homweb.co.kr/
 

혹시 도와 주실분이 계실까요

 

혹시 몰라서 소스도 같이 올려 드립니다.


<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
if (!defined('_SHOP_')) {
    $pop_division = 'comm';
} else {
    $pop_division = 'shop';
}
$sql = " select * from {$g5['new_win_table']}
          where '".G5_TIME_YMDHIS."' between nw_begin_time and nw_end_time
            and nw_device IN ( 'both', 'pc' ) and nw_division IN ( 'both', '".$pop_division."' )
          order by nw_id asc ";
$result = sql_query($sql, false);
$pop = array();
$pop_width = '';
$n = 0;
for($i=0;$row=sql_fetch_array($result);$i++) {
    if (isset($_COOKIE["layer_pop_{$row['nw_id']}"]) && $_COOKIE["layer_pop_{$row['nw_id']}"]) {
        continue;
    }
    $pop[$n] = $row;
    if($row['nw_width'] > $pop_width) {
        $pop_width = $row['nw_width'];
    }
    $n++;
}
$popcnt = count($pop);
$sw_container = $sw_wrapper = $sw_slide = '';
if($popcnt > 1) {
    $sw_container = 'swiper-container';
    $sw_wrapper   = 'swiper-wrapper';
    $sw_slide     = 'swiper-slide';
}
?>
<link rel="stylesheet" href="<?php echo G5_URL ?>/css/swiper.min.css">
<script src="<?php echo G5_URL ?>/js/swiper.js"></script>
<?php if($popcnt > 0) { ?>
<style>
#pop-layer { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; opacity: 0; visibility: hidden; }
#pop-layer.open { z-index: 2000; opacity:1; visibility: visible; transition: all 0.2s ease-in-out; background-color: rgba(0,0,0,0.5); }
#pop-layer .pop-layer-inner { display: flex; width: 100%; height: 100vh; flex-direction: column; justify-content: space-between; align-items: center; }
#pop-layer .pop-layer-inner:before,
#pop-layer .pop-layer-inner:after { display: block; content: ''; height: 1px; }
#pop-layer .pop-layer-inner .pop-inner-wrap { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; }
#pop-layer .pop-layer-inner .pop-inner-wrap .pop-container { position: relative; flex: 1 1 <?php echo $pop_width;?>px; max-width: <?php echo $pop_width;?>px; }
#pop-layer .pop-layer-inner .pop-content { width: 100%; background-color: #fff; border-top-left-radius: 15px; border-top-right-radius: 15px; overflow: hidden; }
#pop-layer .pop-layer-inner .pop-content img { width: 100%; height: auto; }
#pop-layer .pop-layer-inner .pop-footer { position: relative; width: 100%; display: flex; background: #f1f1f1; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
#pop-layer .pop-layer-inner .pop-footer button { padding: .5rem; border-radius: 0;}
#pop-layer .pop-layer-inner .pop-footer button.pop-reject { flex: 1 1 80%; max-width: 80%; border-bottom-left-radius: 15px; }
#pop-layer .pop-layer-inner .pop-footer button.pop-close  { flex: 1 1 20%; max-width: 20%; border-bottom-right-radius: 15px; background-color: red; color: #fff; }
#pop-layer .pop-pagination { position: absolute; top: 10px; right: 10px; z-index: 10; display: flex; }
#pop-layer .pop-pagination .pagination-wrap { background: rgba(51,51,51,.7); padding: 0 1rem; border-radius: 25px; display: flex; }
#pop-layer .pop-pagination .pagination-wrap span { display: inline-block; align-self: center; color: #a0a0a0; }
#pop-layer .pop-pagination .pagination-wrap span.swiper-current { color: #fff; }
#pop-layer .pop-pagination .pagination-wrap span.bar { padding: 0 1px; }
#pop-layer .pop-pagination .pagination-control { margin-left: 5px; background-color: rgba(51,51,51,.7); border-radius: 50%; width: 34px; height: 34px; }
#pop-layer .pop-pagination .pagination-control button { display: inline-block; overflow: hidden; vertical-align: top; margin: 0; border: 0; font-size: 0; text-decoration: none; text-indent: -1000em; line-height: 0; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; width: 100%; height: 100%; }
#pop-layer .pop-pagination .pagination-control button.pause { background-image: url(/images/ico_pause.png); background-size: auto 0.84rem; }
#pop-layer .pop-pagination .pagination-control button.play  { background-image: url(/images/ico_play.png); background-size: auto 0.84rem;}
#pop-layer .pop-close-wrap { position: absolute; top: -70px; left: 0; right: 0; width: 100%; text-align: center; }
#pop-layer .pop-close-wrap button { width: 50px; height: 50px; background-color: rgba(0,0,0,0.3); border-radius: 50px; }
#pop-layer .pop-close-wrap button:before, 
#pop-layer .pop-close-wrap button:after{ content: ""; margin: auto; display: block; width: 50%; height: 1px; background: #8e8e8e; }
#pop-layer .pop-close-wrap button:before{ transform: rotate(-45deg); }
#pop-layer .pop-close-wrap button:after{ transform: rotate(45deg); }
@media (max-width: 768px) {
    #pop-layer.open { z-index: 2000; opacity:1; visibility: visible; transition: all 1s ease-in-out; background-color: rgba(0,0,0,0.5); }
    #pop-layer .pop-layer-inner { position: fixed; left: 0; right: 0; bottom: 0; justify-content: flex-end; }
    #pop-layer .pop-layer-inner:before,
    #pop-layer .pop-layer-inner:after { display: none; }
    #pop-layer .pop-layer-inner .pop-inner-wrap .pop-container { flex: 1 1 100%; max-width: 100%; }
    #pop-layer .pop-layer-inner .pop-content { width: 100% !important; }
    #pop-layer .pop-layer-inner .pop-slide { margin-top: auto; display: flex; justify-content: flex-end; flex-direction: column; }
    #pop-layer .pop-layer-inner .pop-footer button { padding: .5rem; border-radius: 0;}
    #pop-layer .pop-layer-inner .pop-footer button.pop-reject { flex: 1 1 80%; max-width: 80%; border-radius: 0; }
    #pop-layer .pop-layer-inner .pop-footer button.pop-close  { flex: 1 1 20%; max-width: 20%; border-radius: 0; background-color: red; color: #fff; }
}
</style>
<div id="pop-layer">
    <div class="pop-layer-inner">
        <div class="pop-inner-wrap">
            <div id="pop-container" class="pop-container <?php echo $sw_container;?>">
                <ul class="pop-wrapper <?php echo $sw_wrapper;?>">
                <?php
                foreach($pop as $k=>$v) {
                    $reject = $v['nw_disable_hours'] ? $v['nw_disable_hours'] : 24;
                    echo '<li id="pop_content_'.$v['pt_id'].'" class="pop-slide '.$sw_slide.'">';
                        echo '<div class="pop-content" style="width:'.$v['nw_width'].'px;">';
                            echo conv_content(stripslashes($v['nw_content']), 1);
                        echo '</div>';
                        echo '<div class="pop-footer">';
                            echo '<button class="pop-reject" data-id="'.$v['nw_id'].'" data-time="'.$reject.'">'.$reject.'시간 동안 열람하지 않기</button>';
                            echo '<button class="pop-close" data-id="'.$v['nw_id'].'">닫기</button>';
                        echo '</div>';
                    echo '</li>';
                }
                ?>
                </ul>
                <?php if($popcnt > 1) { ?>
                <div class="pop-pagination">
                    <div class="pagination-wrap">
                        <span class="swiper-current"></span><span class="bar">/</span><span class="swiper-total"></span>
                    </div>
                    <div class="pagination-control">
                        <button type="button" class="swiper-control-button pause" data-target="pop-container">정지</button>
                    </div>
                </div>
                <script>
                var popSwiper = new Swiper("#pop-container", {
                    slidesPerView: 1,
                    loop: true,
                    autoplay: {
                        delay: 5000,
                        disableOnInteraction: false,  
                    },
                    speed: 500,
                    on: {
                        init: function () {
                            $('#pop-container').find('.swiper-current').text(this.activeIndex+1);
                            $('#pop-container').find('.swiper-total').text(this.slides.length / 2);
                        },
                        slideChange: function () {
                            $('#pop-container').find('.swiper-current').text((this.activeIndex % 2) +1);
                        }
                    }
                });
                </script>
                <?php } ?>
            </div>
            <div class="pop-close-wrap"><button type="button" class="closex-pop"></button></div>
        </div>
    </div>
</div>
<?php } ?>
<?php if($popcnt > 0) { ?>
<script>
$(function() {
    $('.swiper-control-button').click(function() {
        if($(this).hasClass('pause') == true) {
            popSwiper.autoplay.stop();
            $(this).removeClass('pause');
            $(this).addClass('play');
        } else {
            popSwiper.autoplay.start();
            $(this).removeClass('play');
            $(this).addClass('pause');
        }
    });
    $(".pop-reject").click(function() {
        var id = $(this).data('id');
        var ck_name = 'layer_pop_'+$(this).data('id');
        var exp_time = parseInt($(this).data('time'));
        $(this).closest('li').remove();
        set_cookie(ck_name, 1, exp_time, '');
        var len = $('.pop-slide').length;
        if(len == 1) {
            popSwiper.autoplay.stop();
            popSwiper.slideToLoop(0);
        }
        if(len == 0) {
            $('#pop-layer').removeClass('open');
            $('html').removeClass('noscroll');
        }
    });
    $('.pop-close').click(function() {
        var id = $(this).data('id');
        $(this).closest('li').remove();
        var len = $('.pop-slide').length;
        if(len == 1) {
            popSwiper.autoplay.stop();
            popSwiper.slideToLoop(0);
        }
        if(len == 0) {
            $('#pop-layer').removeClass('open');
            $('html').removeClass('noscroll');
        }
    });
    $('html').addClass('noscroll');
    $('#pop-layer').addClass('open');
});
    
//디버깅    
// 스와이프 컨테이너의 ID를 사용하여 요소를 선택합니다.
var swiperContainer = document.getElementById('pop-container');
// 스와이프 컨테이너의 자식 요소를 확인합니다.
var slides = swiperContainer.querySelectorAll('.swiper-slide');
// 이미지 슬라이드의 개수를 콘솔에 출력합니다.
console.log('이미지 슬라이드 개수:', slides.length);
</script>
<?php } ?>
<script>
$(function() {
    var len = $('.pop-slide').length;
    if(len == 1) {
        $('#pop-layer').find('.pop-pagination').remove();
    }
    if(len == 0) {
        $('#pop-layer').removeClass('open');
    }
    $('.closex-pop').click(function() {
        $('#pop-layer').removeClass('open');
    });
});
</script>


<script>

//디버깅

// 스와이프 컨테이너의 ID를 사용하여 요소를 선택합니다.
var swiperContainer = document.getElementById('pop-container');

// 스와이프 컨테이너의 자식 요소를 확인합니다.
var slides = swiperContainer.querySelectorAll('.swiper-slide');

// 이미지 슬라이드의 개수를 콘솔에 출력합니다.
console.log('이미지 슬라이드 개수:', slides.length);
</script>

이 질문에 댓글 쓰기 :

답변 1

훑어보니 갯수에 따라 팝업은 늘어나는데 나머지는 롤링 형태로 넘어가며 갯수에따라 똑같이 팝업도 발생하는 상태로 보입니다.
원치않으시면 다른 소스를 활요하는게 좋아보입니다,

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

회원로그인

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