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


Posted in Javascript onJuly 21, 2017

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 了。

实例

<div class="modal fade" id="myModal2" data-backdrop="static" <span style="color:#ff0000;">style="overflow:scroll"</span> 
    popover-page-id="CS040104"> 
    <div class="modal-dialog modal-1200"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" 
            aria-hidden="true">×</button> 
          <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题222</h4> 
        </div> 
        <div class="modal-body" >在这里添加一些文本</div> 
        <div class="modal-footer"> 
          <button type="button" class="btn btn-success" 
                 data-toggle="modal" target="modal" 
      data-target="#myModal3">模态框</button> 
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 
          <button type="button" class="btn btn-primary">提交更改</button> 
        </div> 
      </div> 
      <!-- /.modal-content --> 
    </div> 
    <!-- /.modal --> 
    </div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS命名空间的另一种实现
Aug 09 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
JS匿名函数实例分析
Nov 26 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 #Javascript
基于JavaScript实现选项卡效果
Jul 21 #Javascript
基于JavaScript实现弹幕特效
Aug 27 #Javascript
js实现水平滚动菜单导航
Jul 21 #Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 #Javascript
JavaScript实现购物车基本功能
Jul 21 #Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 #Javascript
You might like
php+xml编程之xpath的应用实例
2015/01/24 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php上传图片类及用法示例
2016/05/11 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
python实现哈希表
2014/02/07 Python
十个Python程序员易犯的错误
2015/12/15 Python
详解Python核心对象类型字符串
2018/02/11 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
简单了解Django项目应用创建过程
2020/07/06 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
干部作风整顿个人剖析材料
2014/10/06 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
检察院起诉意见书
2015/05/20 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL