레이어드 팝업
본문
안녕하세요.
레이어드 팝업에 아래와 같은 기능을 추가하고 싶습니다.
1. 뒷 배경 잠금
2. 뒷 배경 스크롤 잠금
어떻게 구현해야 될까요?
답변 2
자바스크립트로 바탕 스크롤 방지
document.body.style.overflow = 'hidden';
// 클릭이벤트로 클래스를 추가 및 삭제하는 방법
var page = $doc.getElementsByTagName('body')[0];
page.classList.add('noscroll');
page.classList.remove('noscroll');
//css는 아래와 같이 하면 될 것입니다.
.noscroll {
position: fixed!important
}
css로는 아래와 같이 하면 될 것입니다.
body, html {
overflow: hidden
}
위의 코드들을 잘 활용하면 충분히 가능 할 것입니다.
코드를 어디에 넣어야 되는지 모르겠습니다 ㅜㅜ
<?php
/**
* skin file : /theme/THEME_NAME/skin/newwin/basic/newwin.inc.html.php
*/
if (!defined('_EYOOM_')) exit;
add_stylesheet('<link rel="stylesheet" href="'.EYOOM_THEME_URL.'/plugins/slick/slick.min.css" type="text/css">',0);
?>
<?php if (is_array($newwin)) { ?>
<style>
#hd_pop {z-index:9999}
#hd_pop .slick-next, #hd_pop .slick-prev {width:20px;height:100%;background:#fff}
#hd_pop .slick-next:hover, #hd_pop .slick-prev:hover {background:#f2f2f2}
#hd_pop .slick-next {right:-25px}
#hd_pop .slick-prev {left:-25px}
#hd_pop .slick-next:before, #hd_pop .slick-prev:before {font-family:'Font Awesome\ 5 Free';font-weight:900;color:#000;font-size:16px}
#hd_pop .slick-next:before {content:"\f054"}
#hd_pop .slick-prev:before {content:"\f053"}
.modal-dialog {display:none}
.modal-dialog .hd-pops-content {display:none;position:relative;margin:10px 20px 20px}
.modal-dialog .hd-pops-list {position:relative;overflow:hidden;outline:none}
.modal-dialog .hd-pops-list img {display:block;max-width:100%;height:auto}
</style>
<div id="hd_pop">
<div id="modal_hd_pop" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="hd-pops-content">
<?php foreach ($newwin as $k => $popup) {
if ($k==0) $nw_disable_hours = $popup['nw_disable_hours'];
?>
<div id="hd_pops_list" class="hd-pops-list">
<?php echo conv_content(($popup['nw_content']), 1); ?>
</div>
<?php } ?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="hd_pops_reject btn-e btn-e-dark" data-bs-dismiss="modal"><?php echo $nw_disable_hours; ?>시간 동안 열지 않기</button>
<button type="button" class="btn-e btn-e-dark" data-bs-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
</div>
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/slick/slick.min.js"></script>
<script>
$(function() {
setTimeout(function(){
$('#modal_hd_pop').modal('show').on('shown.bs.modal', function() {
$('html').css({overflow: 'hidden'});
$('.modal-dialog').css("display", "block");
$('.hd-pops-content').css("display", "block");
$('.hd-pops-content').slick({
infinite: true,
autoplay: true,
autoplaySpeed: 10000,
dots: true,
arrows: true
});
});
}, 1000);
$('#modal_hd_pop').on('hidden.bs.modal', function() {
$('html').css({overflow: ''});
});
});
$(function() {
$(".hd_pops_reject").click(function() {
var ck_name = 'hd_pops_list';
var nw_disable_hours = '<?php echo $nw_disable_hours; ?>';
var exp_time = parseInt(nw_disable_hours);
set_cookie(ck_name, 1, exp_time, g5_cookie_domain);
});
});
</script>
<?php } ?>
궁금한게 코드 중간에 나와있는 class hd_pops_reject btn-e btn-e-dark 이런 부분은 어디서 가져오는 건가요?
slick.min.css
여기에 있거나 없을 수 있습니다.
Jquery 에서 요소를 인식하는 용도로 클래스명과 아이디명 등 다양한 방법이 있습니다.
답변을 작성하시기 전에 로그인 해주세요.
