테스트 사이트 - 개발 중인 베타 버전입니다

레이어드 팝업

네온다 2년 전 조회 1,914

안녕하세요.

레이어드 팝업에 아래와 같은 기능을 추가하고 싶습니다.

 

1. 뒷 배경 잠금

2. 뒷 배경 스크롤 잠금

 

어떻게 구현해야 될까요?

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

답변 2개

slick.min.css

여기에 있거나 없을 수 있습니다.

Jquery 에서 요소를 인식하는 용도로 클래스명과 아이디명 등 다양한 방법이 있습니다.

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

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

자바스크립트로 바탕 스크롤 방지

</p>

<p>document.body.style.overflow = 'hidden';</p>

<p>// 클릭이벤트로 클래스를 추가 및 삭제하는 방법</p>

<p>var page = $doc.getElementsByTagName('body')[0];

page.classList.add('noscroll');

page.classList.remove('noscroll');</p>

<p>//css는 아래와 같이 하면 될 것입니다.</p>

<p>.noscroll {

    position: fixed!important

}</p>

<p>

 

css로는 아래와 같이 하면 될 것입니다.

body, html {
  overflow: hidden
}

 

위의 코드들을 잘 활용하면 충분히 가능 할 것입니다.

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

답변에 대한 댓글 3개

네온다
2년 전
코드를 어디에 넣어야 되는지 모르겠습니다 ㅜㅜ
네온다
2년 전
[code]
<?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 } ?>
[/code]
네온다
2년 전
궁금한게 코드 중간에 나와있는 class hd_pops_reject btn-e btn-e-dark 이런 부분은 어디서 가져오는 건가요?

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

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

로그인