팝업 관련 질문 드립니다.

팝업 관련 질문 드립니다.

QA

팝업 관련 질문 드립니다.

답변 1

본문

안녕하세요 

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

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 299
© SIRSOFT
현재 페이지 제일 처음으로