解决bootstrap中模态框显示后页面抖动的问题

最新推荐文章于 2022-09-15 15:51:29 发布

Smileku

最新推荐文章于 2022-09-15 15:51:29 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/Smileku/article/details/52174009

版权

$(function(){
if($("modal").show()){
$("body").css({"overflow":"hidden","margin-right":"15px;"})
$("modal").css({"overflow":"auto","overflow-y":"scroll;"})
}

})

  (function() {
        var Modal = {};
//解决Modal弹出时页面左右移动问题
        Modal.adjustBody_beforeShow = function(){
            var body_scrollHeight = $('body')[0].scrollHeight;
            var docHeight = document.documentElement.clientHeight;
            if(body_scrollHeight > docHeight){
                $('header').css({
                    'overflow' : 'hidden',
                    'padding-right' : '17px'
                });
                console.log("1");
                $('.modal').css({'overflow-y':'hidden'})
            }else{
                $('body').css({
                    'overflow' : 'auto',
                    'margin-right' : '0'
                });
                console.log("2");
                $('.modal').css({'overflow-y':'auto'})
            }
        }
        Modal.adjustBody_afterShow = function(){
            var body_scrollHeight = $('body')[0].scrollHeight;
            var docHeight = document.documentElement.clientHeight;
            if(body_scrollHeight > docHeight){
                $('header').css({
                    'overflow' : 'hidden',
                    'padding-right' : '0'
                });
                console.log("3");
            }else{
                $('body').css({
                    'overflow' : 'auto',
                    'margin-right' : '0'
                });
                console.log("4");
            }
        }
        $(' .modal').modal('hide');
        $('.modal ').on('show.bs.modal', function (event) {
            Modal.adjustBody_beforeShow();
        });
        $('.modal').on('hidden.bs.modal', function (event) {
            Modal.adjustBody_afterShow();
        });
    })();