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

陈好
  • 419

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

回复
阅读 12.4k
3 个回答

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

.modal-open {
  overflow: hidden;
}
.modal-open{
    overflow: inherit ;
}

且在调用

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

后追加

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

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

解决方法:

覆盖原有属性:

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

或 在body上挂上新的类,如下设置:

.fix-modal-open {
  overflow: initial;
}
宣传栏