ng2-bootstrap的modal嵌套时无法滚动的情况
在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嵌套时无法滚动的情况的更多相关文章
- bootstrap的modal弹窗,在多层窗口关闭时只会关闭自窗口,不再关闭父窗口
bootstrap多层modal弹窗时.当子窗口关闭时,所有父窗口一起关闭. 原因是bootstrap在窗口关闭事件委托时,委托给所有窗口. 如源码: this.$element.on('click. ...
- Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- 解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- 关于bootstrap的modal弹出层嵌套子Modal所引发的血案(转)
原文地址 http://blog.csdn.net/liuxiaogangqq/article/details/51821359 bootstrap的弹出层嵌套有一个问题 ,当子modal关闭时父的m ...
- 解决select2在bootstrap的modal中默认不显示的问题
在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...
- 利用bootstrap的modal组件自定义alert,confirm和modal对话框
由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...
- 一键切换皮肤的解决思想及iframe嵌套时寻找下级iframe的方法
项目中有个一键切换皮肤的功能,感觉还不错,记录下,就是各颜色样式设置起来太复杂了,不知道有没有更简便的方法: 1.切换皮肤结构层 <li title="<s:text name= ...
- Bootstrap 的 Modal
一.简介 Modal 就是弹出框,这里 有一个例子. Modal 的完整代码如下: <div class="modal fade" tabindex="-1&quo ...
- bootstrap 模态 modal 小例子
bootstrap 模态 modal 小例子 <html> <head> <meta charset="utf-8" /> <title ...
随机推荐
- Struts 2 框架相比Struts1的新特性
POJO形式和POJO动作 - 已经摆脱了Struts2的动作表单的Struts框架的一个组成部分.Struts2可以使用任何的POJO接收的形式输入.同样的,你现在可以看到任何POJO的Action ...
- Grid标签计算结果集中的合计行
方法一: var detailT= grid.gettable("11"); var r=detailT.rows.length; detailT.rows[r-1].cells[ ...
- javascript运算符之==和===
1.== :判断两个数是否相等,在比较之前会自动转化类型再做比较.为确定两个运算数是否相等,这两个运算符都会进行类型转换. 执行类型转换的规则如下: 1.如果一个运算数是 Boolean 值,在检查相 ...
- go的编译与重启
ps -ef|grep pro-name| grep -v grep|awk '{print $2}'|xargs kill -9 > /dev/null go build nohup ./xe ...
- Java Struts2 (三)
一.国际化概念(了解) 1.什么是国际化 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 2.什么需要国际 ...
- HTTP状态码302、303、307区别
HTTP状态码3XX表示重定向,表明浏览器需要执行某些特殊的处理以正确处理请求. 301 Moved Permanently 永久性定向.该状态码表示请求的资源已被分配了新的URI,以后应使用资源现在 ...
- makefile 模板 (template)
本文把makefile 分成了三份:生成可执行文件的makefile,生成静态链接库的makefile,生成动态链接库的makefile. 这些makefile都很简单,一般都是一看就会用,用法也很容 ...
- Windows下将jar包封装成服务程序
1 准备 使用工具Procrun(http://commons.apache.org/proper/commons-daemon/procrun.html),下载地址(http://archive.a ...
- 密码存储中MD5的安全问题与替代方案
md5安全吗?有多么地不安全?如何才能安全地存储密码?... md5安全吗? 经过各种安全事件后,很多系统在存放密码的时候不会直接存放明文密码了,大都改成了存放了 md5 加密(hash)后的密码,可 ...
- Web API 2 入门——Web API 2(C#)入门(谷歌翻译)
ASP.NET Web API 2(C#)入门 在这篇文章中 本教程中使用的软件版本 创建一个Web API项目 添加模型 添加控制器 使用Javascript和jQuery调用Web API 运行应 ...