解决bootstrap模态框弹出时，画面抖动

当使用bootstrap的模态框的时候，bootstrap会自动给body添加class=modal-open  并且添加padding-right值。 所以会出现抖动效果。

 

网上找到在js中加入函数可解决。

//解决Modal弹出时页面左右移动问题
  Modal.prototype.adjustBody_beforeShow = function(){
    var body_scrollHeight = $('body')[0].scrollHeight;
    var docHeight = document.documentElement.clientHeight;
    if(body_scrollHeight > docHeight){
      $('body').css({
        'overflow' : 'hidden',
        'margin-right' : '15px'
      });
      $('.modal').css({'overflow-y':'scroll'})
    }else{
      $('body').css({
        'overflow' : 'auto',
        'margin-right' : '0'
      });
      $('.modal').css({'overflow-y':'auto'})
    }
  }
  Modal.prototype.adjustBody_afterShow = function(){
    var body_scrollHeight = $('body')[0].scrollHeight;
    var docHeight = document.documentElement.clientHeight;
    if(body_scrollHeight > docHeight){
      $('body').css({
        'overflow' : 'auto',
        'margin-right' : '0'
      });
    }else{
      $('body').css({
        'overflow' : 'auto',
        'margin-right' : '0'
      });
    }
  }

函数使用方法：

Modal.prototype.show = function (_relatedTarget) {
    this.adjustBody_beforeShow();
    //...other code
}

Modal.prototype.hide = function (e) {
    this.adjustBody_afterShow();
    //...other code
}

 

 

现在我附上我解决此问题的最简单的方式：

 

给页面css添加以下代码，当模态框给body添加padding-right的值时就会被下面的代码覆盖。所有就不会有抖动效果了。

.modal-open {
overflow-y: auto !important;
padding-right: 0 !important;
}

 

亲测有效  不喜勿喷。新手求关照

转载于:https://my.oschina.net/u/2500169/blog/882039