在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. 解决Openwrt安装插件提示一下错误的办法

    解决Openwrt安装插件提示一下错误的办法 Openwrt安装17ce插件,提示一下错误: Collected errors: * check_data_file_clashes: Package ...

  2. JS判断浏览器类型,JS判断客户端操作系统

    JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...

  3. Html5中 视频 音频标签 进度条问题

    最近项目中使用Html5的video和audio标签来在线播放视频和音频文件,但是遇到个奇葩的问题,页面上播放之后进度条无效, 查看w3c之后发现html代码并没有什么不同,之后猜想如果用静态的htm ...

  4. Creator4.2建模心得与技巧1——树的建立与跟随摄像机旋转

    Creator建模: 树一般在虚拟现实程序中都用面来实现,一种方法是通过两个面相互垂直成90度叠放在一起,另一种方法是让树面正对着视角一起旋转.这里主要说一下第二种方法. 主要思路:把树面一直正对着摄 ...

  5. How to use DBVisualizer to connect to Hbase using Apache Phoenix

    How to use DBVisualizer to connect to Hbase using Apache Phoenix Article DB Visualizer is a popular ...

  6. 26_线程池_ThreadPoolExecutor

    [ThreadPoolExecutor简述] 无论是Executors类的newFixedThreadPool().newSingleThreadExecutor(),还是newCachedThrea ...

  7. Tesseract-OCR-03-图片文字识别

    Tesseract-OCR-03-图片文字识别 本篇介绍使用 Tesseract-OCR 做图片文字识别,识别手写文字的时候,正确率能达到 90%,当训练后正确率是极高的.这里介绍的图片文字识别,可以 ...

  8. Linux制作deb

    1.新建一个我们临时的工作目录mkdir deb 2.新建我们程序的目录mkdir hello 3.编写我们的程序 我们以我们最熟悉的helloworld程序做起,hello.c代码如下#includ ...

  9. mac 修改MAC代码

    1.生成一个mac地址: openssl rand -hex | sed 's/\(..\)/\1:/g; s/.$//' 2.关闭无线 sudo /System/Library/PrivateFra ...

  10. pt-duplicate-key-checker使用

    pt-duplicate-key-checker工具可以检测表中重复的索引,对于一些业务量很大的表,而且开发不规范的情况下有用.基本用法: 看一下我们的测试表: mysql> desc new_ ...