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

슬라이드 팝업 질문이요~ 채택완료

홀로그램웹 2년 전 조회 2,125
답변 1
목록 

</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';

}

?>

<?php if($popcnt > 0) { ?></p>

<p>

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

}</p>

<p>.mo-view{

        display:none

    }

@media screen and ( max-width:1280px ){

    .pc-view{

        display:none

    }

    .mo-view{

        display:block

    }

}</p>

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

<p>    

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

                </p>

<p>

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

});

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

 

 

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

 

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

 

 

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

답변 1개

채택된 답변
+20 포인트
애 

</p>

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

    }

    

    // 팝업 열기 버튼 클릭 시 처리 코드 추가

});

 

이렇게 한번 해보세요.

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

답변에 대한 댓글 1개

�
홀로그램웹
2년 전
하단에 있는 스크립트 다 지우고 이거로 해보라고 하신거죠?
그렇게 했는데 팝업이 아예 안떠요~

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

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

로그인