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

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

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


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

解决方法:

覆盖原有属性:

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

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

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

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

.modal-open {
  overflow: hidden;
}

.modal-open{
    overflow: inherit ;
}

且在调用

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

后追加

$("body").css('padding-right','0px');
【热门文章】
【热门文章】