微客导航 » 文章资讯 » bootstrap多层模态框滚动条消失的问题

bootstrap多层模态框滚动条消失的问题

2024-01-25 22:10:03 153

bootstrap打开多层模态框的情况下，关闭任意一个模态框，都会导致其余模态框的滚动条消失。

监测html发现，当打开模态框时，会给body元素加一个modal-open的class，而在bootstrap.css中，有这样一条css规则：

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

因为有overflow-y:auto，所以模态框才可以滚动，而当关闭任何一个模态框时，body元素的css规则modal-open会被移除掉，自然overflow-y:auto也就没有了，所以模态框的滚动条就消失了。

解决方案是在模态框的div元素上加一条style="overflow:auto"，如下：

这样，模态框的滚动就不依赖body元素的css规则modal-open了。

实例

style="overflow:scroll"
popover-page-id="CS040104">



×
模态框（Modal）标题222

在这里添加一些文本

模态框关闭提交更改

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。