슬라이드 팝업 질문이요~
관련링크
https://pjh03010.cafe24.com/
114회 연결
본문
<?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');
}
// 팝업 열기 버튼 클릭 시 처리 코드 추가
});
이렇게 한번 해보세요.
하단에 있는 스크립트 다 지우고 이거로 해보라고 하신거죠?
그렇게 했는데 팝업이 아예 안떠요~
답변을 작성하시기 전에 로그인 해주세요.
