팝업 관련 질문 드립니다.
본문
안녕하세요
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
훑어보니 갯수에 따라 팝업은 늘어나는데 나머지는 롤링 형태로 넘어가며 갯수에따라 똑같이 팝업도 발생하는 상태로 보입니다.
원치않으시면 다른 소스를 활요하는게 좋아보입니다,
다른 부분이 필요하시면 댓글 남기시거나 쪽지 주시면 타 팝업 제작해드리고 공유해드리겠습니다.
답변을 작성하시기 전에 로그인 해주세요.