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 ...
随机推荐
- unity3d之如何控制人物移动、旋转和动画播放
代码源自噩梦射手,记录一下方便后续使用,顺便将老师的解释给备注上去_(:з」∠)_ using UnityEngine; using UnitySampleAssets.CrossPlatformIn ...
- 接口调用 读取图片报错 Access to the path '' is denied.解决方案
调用接口 读取服务器上 图片 报错: Server was unable to process request. ---> Access to the path '图片路径' is denied ...
- 简单理解C#中的抽象工厂模式是什么概念!
抽象工厂模式向客户端提供一个接口,使得客户端在不必指定具体类型的情况下,创建多个产品族中的对象.本文采取的仍然是接着以前的那个快餐店的例子.现在,快餐店经常良好,逐渐发展壮大,为了适合不同地方人的饮食 ...
- Vue2.0中的Ajax请求
Vue可以借助于vue-resource来实现Ajax请求 http请求报文 浏览器与服务器数据交互是遵循http协议的,当浏览器要访问服务器的时候,浏览器需要将相关请求数据提交给服务器. 格式分为: ...
- babel的使用以及安装配置
简介 babel是一个广泛使用的转码器,可以将ES6代码转化为ES5代码,从而在现有环境执行,这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 安装及配置 npm install ...
- MFC string char cstring 类型转换
在Unicode环境下用以下转换: CString z_strCurtTime = _T(""); // 获取当前时间 CTime z_tCurTime = CTime::GetC ...
- Java中的volatile关键字的功能
Java中的volatile关键字的功能 volatile是java中的一个类型修饰符.它是被设计用来修饰被不同线程访问和修改的变量.如果不加入volatile,基本上会导致这样的结果:要么无法编写多 ...
- SQL Server ->> T-SQL查询面试题之实例版
1 - 3 题: 数据表结构: OrderID ProductID OrderDate SaleAmount 1 1 2015-01-01 100 2 6 2015-02-01 900 3 1 ...
- pt-find使用
查找MySQL的表,并且做一些操作,基本语法就如下: pt-find [OPTIONS] [DATABASES] (1)查找一天前建立的MyISAM 引擎的表 [root@mxqmongodb2 bi ...
- SVN常用功能介绍(一)
简介 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS. 互联网上很多版本控制服务已从CVS迁移到Subver ...