슬라이드 팝업 질문이요~

슬라이드 팝업 질문이요~

QA

슬라이드 팝업 질문이요~

답변 1

본문

33102762_1698905926.9708.png


<?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';
}
?>
<?php if($popcnt > 0) { ?>

<!--mpbile-->
<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-inner-wrap .pop-container .pop-pc{ display:flex}
#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;justify-content: space-between; gap:50px; background:#1e1e1e; 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 {max-width: 80%;padding-left:30px; border-bottom-left-radius: 15px; color: rgba(255,255,255,0.5);}
#pop-layer .pop-layer-inner .pop-footer button.pop-close  { max-width: 20%; border-bottom-right-radius: 15px; 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 { text-align: center; }
#pop-layer .pop-close-wrap button { width: 50px; height: 50px; 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; }
}
.mo-view{
        display:none
    }
@media screen and ( max-width:1280px ){
    .pc-view{
        display:none
    }
    .mo-view{
        display:block
    }
}
</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 class="pop-close-wrap"><button type="button" class="closex-pop"></button></div>';
                                    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>
                <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');
});
</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>

 

 

메인 팝업으로 슬라이드 형태의 팝업인데요.

 

1. 24시간열람하지않기 버튼이 팝업별로 각각 적용되어 있어요 공통으로 한번만 눌렀을 때 모든 팝업 다 적용 되게 할 수 있을까요?(닫기는 모두 적용되요)

 

 

이 질문에 댓글 쓰기 :

답변 1


$(function() {
    // 24시간 동안 열람하지 않기 버튼을 클릭할 때
    $(".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 allPopups = $('.pop-slide');
        for (var i = 0; i < allPopups.length; i++) {
            var popupId = $(allPopups[i]).find('.pop-reject').data('id');
            if (popupId != id) {
                var otherCkName = 'layer_pop_' + popupId;
                set_cookie(otherCkName, 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');
        }
    });
    
    // 팝업 닫기 버튼 처리 코드는 여기에 추가
    
    // 팝업 열기 시 모든 쿠키 상태 확인
    var allPopups = $('.pop-slide');
    for (var i = 0; i < allPopups.length; i++) {
        var popupId = $(allPopups[i]).find('.pop-reject').data('id');
        var ckName = 'layer_pop_' + popupId;
        if (get_cookie(ckName) === '1') {
            // 해당 팝업에 대한 쿠키가 설정되었으면 팝업 숨기기
            $(allPopups[i]).remove();
        }
    }
    
    var len = $('.pop-slide').length;
    if(len == 1) {
        popSwiper.autoplay.stop();
        popSwiper.slideToLoop(0);
    }
    if(len == 0) {
        $('#pop-layer').removeClass('open');
    }
    
    // 팝업 열기 버튼 클릭 시 처리 코드 추가
});

 

이렇게 한번 해보세요.

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