禁止外层弹窗口的滚动

hyx 2019-03-01 15:37:09 332次 0

 一般弹出层滚动,滚动完,外层即body接着滚动,如何禁止外层滚动呢?

搜了很多终于找出了一个可以的办法

例子如下:

下面是一个弹出框,默认弹出,点击关闭后就一直隐藏了,手机端的则是始终隐藏,由于移动端部分高度超出了,就设置了滚动条

(function () {
    /*首页声明*/
    /*默认状态*/
    var statement_index=getCookie("statement_index") || 'on';
    var window_w=$(window).width();
    if(statement_index==='off' || window_w<998){
        $('#kefu12').hide();
        $("#kefu12_open_btn").show();
    }else {
        $('#kefu12').show();
    }

    /*获取窗口高度*/
    if(window_w<998){
        var window_h=$(window).height();
        var cur_h=window_h-100;
        $('#kefu12').height(cur_h);
    }

    $("#kefu12_close").click(function () {
        if(window_w<998){
            $('body').removeClass('modal-open');
            document.scrollingElement.scrollTop = scrollTop;
            $('#kefu12 .cs_close').css({
                'position': 'absolute',
                'right': '5px',
                'top': '5px'
            });
        }
        $('#kefu12').slideToggle();
        $("#kefu12_open_btn").show();

        var statement_index_val="off";
        setCookie("statement_index",statement_index_val,30);
    });
    $("#kefu12_open_btn").click(function () {
        $('#kefu12').slideToggle();
        $("#kefu12_open_btn").hide();
        if(window_w<998){
            /*关闭按钮置顶*/
            $('#kefu12 .cs_close').css({
                'position': 'fixed',
                'right': '17px',
                'top': 'inherit'
            });
            /*body禁止滚动*/
            scrollTop = document.scrollingElement.scrollTop;
            $('body').addClass('modal-open');
            document.body.style.top = -scrollTop + 'px';
        }

    });
})()


发表评论

注:*为必填

回复 的评论
*
选择
*
*