레이어드 팝업

레이어드 팝업

QA

레이어드 팝업

본문

안녕하세요.

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

 

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

답변을 작성하시기 전에 로그인 해주세요.
전체 123,117 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT