在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩的问题。网上有朋友给出的解决方案是在A增加overflow:auto的方法解决,但是这种方法会使得页面出现两个滚动条。

鉴于上述已经了解到原因是由于遮罩造成的,那么可以重新增加遮罩,即在关闭B之后,重新给body增加遮罩$("body").addClass("modal-open");

当然这个方法需要自己在合适的地方增加JS代码,不过经过测试这样的解决方法最合理。

Bootstrap中模态框多层嵌套时滚动条问题的更多相关文章

  1. bootstrap中模态框如果放入form表单中会存在的问题

    bootstrap中模态框如果放入form表单中会存在的问题:当模态框显示时,点回车会出现表单自动提交!!!所以在使用模态框的时候要特别注意!

  2. 黄聪:bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  3. BootStrap中模态框踩坑

    在模态框中使用html标签上的自定义属性来打开模态框后,在使用JS关闭模态框,就会出现多层蒙板问题 出现这个问题的原因就是没有仔细看bootstrap的官方文档,我人麻了,搞了好久 务必将模态框的 H ...

  4. bootstrap中模态框、模态框的属性

    工作中有需要用到模态框的可以看看 <div class="modal fade" id="userModal" tabindex="-1&quo ...

  5. bootstrap中模态框的大小设置;

    bootstrap模态框调节大小: 大尺寸:黑体加大的字体,是更改的代码 <!-- 大模态框的调节 --> <button type="button" class ...

  6. bootstrap中模态框的使用

    1.代码: <%--登录模态框--%> <li><a href="#" data-toggle="modal" data-targ ...

  7. bootstrap中模态框的大小设置

    <!-- 大模态框的调节 --> <button type="button" class="btn btn-primary" data-tog ...

  8. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

  9. Bootstrap 避免模态框在用户点击背景空白处时,会自动关闭。

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

随机推荐

  1. 如何使用Web3.js API 在页面中进行转账

    本文介绍如何使用Web3.js API 在页面中进行转账,是我翻译的文档Web3.js 0.2x 中文版 及 区块链全栈-以太坊DAPP开发实战 中Demo的文章说明. 写在前面 阅读本文前,你应该对 ...

  2. Android 如何更改一个 imageview的颜色

    xml中可以使用tint属性 tips:这里的图片必须是png格式的文件才行,不然你得到的就是一个被纯色覆盖的图 java中 使用 imageView.setColorFilter(Color.WHI ...

  3. CentOS7 添加开机启动项

     centos6 加入开机启动:   vim /etc/rc.d/rc.local 注意命令不要出错,重启后生效   或者   centos 7 下: vim /lib/systemd/system/ ...

  4. centos 7 源代码安装mysql5.6

    ###### mysql ######### 引言:这里选用mysql5.6版本,5.7版本编译时间需要几个小时. 编译安装环境: yum -y install make gcc-c++ cmake ...

  5. Python操作excel的几种方式--xlrd、xlwt、openpyxl

    openpyxl xlrd xlwt   在处理excel数据时发现了xlwt的局限性–不能写入超过65535行.256列的数据(因为它只支持Excel 2003及之前的版本,在这些版本的Excel中 ...

  6. 『TensorFlow』分布式训练_其二_单机多GPU并行&GPU模式设定

    建议比对『MXNet』第七弹_多GPU并行程序设计 一.tensorflow GPU设置 GPU指定占用 gpu_options = tf.GPUOptions(per_process_gpu_mem ...

  7. spring boot(十四)shiro登录认证与权限管理

    这篇文章我们来学习如何使用Spring Boot集成Apache Shiro.安全应该是互联网公司的一道生命线,几乎任何的公司都会涉及到这方面的需求.在Java领域一般有Spring Security ...

  8. react-navigation学习笔记

    1.关于this.props.navigation.navigate()与this.props.navigation.push()的区别 navigate方法在跳转时会在已有的路由堆栈中查找是否已经存 ...

  9. Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。

    /** *需求:同年同月,同年不同月(两个月相减大于1,小于1),不同年(两个年相减大于1(是否为闰年),小于1),起止包含的月份及天 */ //首先引入组件 import { DatePicker} ...

  10. git 连接github的配置

    这段时间要先在git上开发,上传代码到github上,所以首先需配置本地的git和github. 这几篇文章都不错,可以参考一下,大体的配置都很清楚. 1:https://blog.csdn.net/ ...