在ng2-bootstrap的弹窗modal中再弹出另外一个弹窗,关闭子弹窗后,父弹窗会出现无法上下滚动的情况。

通过观察样式可知,关闭子弹窗前,父弹窗的body上是有modal-open样式的,关闭之后此样式被移除了。

所以我们试着在子弹窗关闭后给父弹窗的body加上modal-open样式,测试证明加上后是可以滚动的。

那么解决此问题的方案就有了,只需要在关闭子弹窗后给父窗体的body加上modal-open样式即可。

1.首选引入jquery插件

import "jquery-slimscroll";

2.在子弹窗hide后给父弹窗加上modal-open样式

hideChildModal():void{
  this.childModal.hide();
  $("body").parent().addClass("modal-open");
}

ng2-bootstrap的modal嵌套时无法滚动的情况的更多相关文章

  1. bootstrap的modal弹窗,在多层窗口关闭时只会关闭自窗口,不再关闭父窗口

    bootstrap多层modal弹窗时.当子窗口关闭时,所有父窗口一起关闭. 原因是bootstrap在窗口关闭事件委托时,委托给所有窗口. 如源码: this.$element.on('click. ...

  2. Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条

    Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...

  3. 解决Bootstrap模态框切换时页面抖动 or页面滚动条

    Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...

  4. 关于bootstrap的modal弹出层嵌套子Modal所引发的血案(转)

    原文地址 http://blog.csdn.net/liuxiaogangqq/article/details/51821359 bootstrap的弹出层嵌套有一个问题 ,当子modal关闭时父的m ...

  5. 解决select2在bootstrap的modal中默认不显示的问题

    在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...

  6. 利用bootstrap的modal组件自定义alert,confirm和modal对话框

    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...

  7. 一键切换皮肤的解决思想及iframe嵌套时寻找下级iframe的方法

    项目中有个一键切换皮肤的功能,感觉还不错,记录下,就是各颜色样式设置起来太复杂了,不知道有没有更简便的方法: 1.切换皮肤结构层 <li title="<s:text name= ...

  8. Bootstrap 的 Modal

    一.简介 Modal 就是弹出框,这里 有一个例子. Modal 的完整代码如下: <div class="modal fade" tabindex="-1&quo ...

  9. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

随机推荐

  1. cygwin 的安装和配置

         Cygwin是一个在windows平台上运行的类UNIX模拟环境,是cygnus solutions公司开发的自由软件(该公司开发的著名工具还有eCos,不过现已被Redhat收购).它对于 ...

  2. vcfc之zk+postsql+keystore(cassandra)框架分析

    vcfc框架总结: 1 一. bus和keystore是如何协调处理的,什么样的问题是处理不了的? 1. 如果在备重启的过程中,主处理了某个时间1,备机如果同步数据呢? 二 .数据可靠性和一致性分析 ...

  3. Docker问题集合

    1. 安装后启动出现 解决办法: 删除以下文件夹重新启动docker服务即可: 可能原因:(1) 之前docker进程出现错误并保存在keys.json文件中 (2) 删除之前配置了阿里云镜像,生成了 ...

  4. express的proxy实现前后端分离

    var express = require('express') var proxy = require('http-proxy-middleware') var app = express() ap ...

  5. 记录开发Nodejs c++ addon的一些经验(一、技术栈)

    Nodejs c++ addon 是用c++去编写Nodejs的插件 技术栈: 1.node-gyp 一个用于把c++文件编译成node可执行文件的库 2.v8 google v8引擎 用于处理c++ ...

  6. RoadFlow工作流与JUI(DWZ)前端框架的集成

    此文只说明RoadFlow前端与JUI的集成,关于程序和接口请参照WebForm或MVC文档. 修改JUI配置文件dwz.frag.xml,此文件一般位于JUI根目录下. 2.修改文件js/dwz.n ...

  7. Tomcat的运行模式

    tomcat的三种运行模式 tomcat Tomcat Connector的三种不同的运行模式性能相差很大,有人测试过的结果如下:  这三种模式的不同之处如下: ●BIO:  一个线程处理一个请求.缺 ...

  8. double转换long的疑问

    在lua(5.1.4)下面测试的时候使用0x100000000的时候出现了问题,打印结果很明显,如下所示: Lua Copyright (C) - Lua.org, PUC-Rio > prin ...

  9. Python学习---递归函数的学习

    定义:在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 递归特性: 1. 必须有一个明确的结束条件 2. 每次进入更深一层递归时,问题规模相比上次递归都应有所减少 ...

  10. June 19th 2017 Week 25th Monday

    Everyone is dissatisfied with his own fortune. 人对自己的命运总是感到不满足. We always want more, even when we hav ...