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面试题与Javascript词法作用域说明
Nov 09 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
浅谈Django的缓存机制
2018/08/23 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
remote接口和home接口主要作用
2013/05/15 面试题
医院实习介绍信
2014/01/12 职场文书
社区母亲节活动记录
2014/03/06 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技