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

陈好
  • 417

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

回复
阅读 12.2k
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;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏