bootstrap多层模态框滚动条消失

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",如下:

<div class="modal fade" ... style="overflow: auto">

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端进阶之旅阅读 7,139评论 0 42
  • 为了提高人们对自身健康的关注度,及早预防细菌的疯狂滋长引起不同类型的疾病,本着"奉献,友爱,辅助,进步"的志愿精神...
    Fivemooncake话梅阅读 162评论 0 0
  • 百日目标检视 1.每天看20页书 2.每天写感恩总结 3.每天读一遍心经 本周成果(可从八大关注选择全部或部分进行...
    珊公子520阅读 165评论 0 0
  • 【每日必做】 1.每日记账、检视花费 2.规划明日最重要三件事 3.每日总结(觉察日记) 4.每日听书(喜马拉雅)...
    快乐的老露阅读 221评论 0 0