테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

팝업 관련 질문 드립니다. 채택완료

꿈의세계 1년 전 조회 1,755
답변 1
목록

안녕하세요 

https://sir.kr/g5_skin/57482?sfl=wr_subject%7C%7Cwr_content&stx=%ED%8C%9D%EC%97%85" rel="nofollow noreferrer noopener" target="_blank">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/" rel="nofollow noreferrer noopener" target="_blank">https://sinjinkyu.homweb.co.kr/
 

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

 

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

</strong></p>

<p><?php

if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

if (!defined('_SHOP_')) {

    $pop_division = 'comm';

} else {

    $pop_division = 'shop';

}</p>

<p>$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);</p>

<p>$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); }</p>

<p>@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></p>

<p>    </div>

</div>

<?php } ?></p>

<p><?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);</p>

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

<p><strong>


<script>

//디버깅

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

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

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

#팝업
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
삐
삐도리
1년 전

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
삐도리
1년 전
다른 부분이 필요하시면 댓글 남기시거나 쪽지 주시면 타 팝업 제작해드리고 공유해드리겠습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인