bootstrap模态框导致Y轴下拉框消失解决方法

来源:互联网 发布:如何取消网络共享密码 编辑:程序博客网 时间:2024/06/06 00:45

使用angular 的ng-include在页面中跳转,一个子页面中有一个模态框,当操作了模态框从页面跳转回来时右侧滚动条会消失,添加以下CSS解决


.modal {  overflow-y: auto;}.modal-open {  overflow: auto;}


使用bootstrap3,原先网页有Y轴滚动条,打开modal后滚动条消失,发现下层网页内容出现右移,关闭modal后下层网页内容又左移至原位
——————————————————————————————————————————————————

解决方案

注意看BS3的modal,有这么一个样式,当打开的时候,会给body加上modal-open,于是y滚动条没了,页面宽度变大,自然元素就右移了

.modal-open {
overflow: hidden;
}

------------------------------------------------------------------------------------------------------------------------------------------------------

解决方案

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

解决方法:

覆盖原有属性:

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

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

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

0 0
原创粉丝点击