在使用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. PHP策略模式demo

    <?php//策略模式就是你有很多的方法,选择一种适合自己的,// 单例模式就是只有一个实例对象,不需要每个文件都要加载,比如连接数据库,// 工厂模式就是//策略模式interface cha ...

  2. Spring boot @Autowired注解在非Controller中注入为null

    参考链接:https://blog.csdn.net/qq_35056292/article/details/78430777

  3. Java虚拟机JVM简单理解

    Java虚拟机JVM的作用: Java源文件(.java)通过编译器编译成.class文件,.class文件通过JVM中的解释器解释成特定机器上的机器代码,从而实现Java语言的跨平台. JVM的体系 ...

  4. 一、SQL应用(工作中遇到的根据表的某列的值不同,采用的不同列关联表)

    一.工作总结: 今天工作中遇到了这样一个需求,具体是根据某张表的某一列值得不同,进行不同关联操作.起初自己的想法是采用UNION操作,把两种情况连接起来,但是会出现一个问题,当进行动态传值SQL拼接的 ...

  5. IDEA上传一个项目到github

    IDEA上传一个项目到github 只要3步 1. 2. 3. 4. 5.查看页面 上传成功... 详情:    https://blog.csdn.net/qq_27093465/article/d ...

  6. Java语言中的值传递与引用传递

    Java应用程序中永远不会传递对象,而只会传递对象应用,因此,按对象引用传递. (1)      Int作为参数传递时,对形参值得修改不会影响到实参: (2)      StringBuffer作为参 ...

  7. 在Vue中关闭Eslint 的方法

    在vue项目中关闭ESLint方法:找到 webpack.base.conf.js 将这些代码注释掉, { test: /\.(js|vue)$/, loader: 'eslint-loader', ...

  8. Spring AOP+Log4j记录项目日志

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6567672.html 项目日志记录是项目开发.运营必不可少的内容,有了它可以对系统有整体的把控,出现任何问题 ...

  9. 设计模式:java及spring观察者模式(有利于代码解耦)

    http://www.cnblogs.com/softidea/p/5716870.html 什么是ApplicationContext? 它是Spring的核心,Context我们通常解释为上下文环 ...

  10. 运行B/s项目时,出现尝试访问类型与数组不兼容元素问题?

    1.问题描述 运行B/s项目时,浏览器出现应用程序中服务器错误(尝试访问类型与数组不兼容的元素) 2.问题原因 本人是项目引用的dll版本不一致问题,引用的System.Web.Mvc版本是4.0.0 ...