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 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
javascript不可用的问题探究
Oct 01 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
JS实现时间校验的代码
May 25 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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中for循环语句的几种变型
2006/11/26 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
js实现下拉框效果(select)
2017/03/28 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
Python实现批量下载文件
2015/05/17 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
Python实现的建造者模式示例
2018/08/06 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
工程造价自荐信
2013/10/09 职场文书
解除劳动合同协议书
2014/04/14 职场文书
欢度春节标语
2014/07/01 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
Python函数中的不定长参数相关知识总结
2021/06/24 Python
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
python数字图像处理:图像的绘制
2022/06/28 Python