bootstrap3打开modal后下层网页内容出现右移

Question

使用bootstrap3,原先网页有Y轴滚动条,打开modal后滚动条消失,发现下层网页内容出现右移,关闭modal后下层网页内容又左移至原位,请问这是怎么回事?要如何避免?

Answer 1

注意看BS3的modal，有这么一个样式，当打开的时候，会给body加上modal-open，于是y滚动条没了，页面宽度变大，自然元素就右移了，我图省事，直接重写了这个属性为intial解决了

.modal-open {
  overflow: hidden;
}

Answer 2

.modal-open{
    overflow: inherit ;
}

且在调用

$("#myModal").modal(); 

后追加

$("body").css('padding-right','0px');

Answer 3

因为modal会给body添加的modal-open类，使得overflow属性默认为hidden，导致滚动条消失了。（溢出部分直接hidden了）

解决方法：

覆盖原有属性：

.modal-open {
  overflow: initial !important;
}

或 在body上挂上新的类，如下设置：

.fix-modal-open {
  overflow: initial;
}