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 ...
随机推荐
- Vue-resource和Axios对比以及Vue-axios
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios. vue-resource特点 vue-resource插件具有以下特点: 1,体积小 vue-resour ...
- Codeforces Round #416 (Div. 2) A+B
A. Vladik and Courtesy 2 seconds 256 megabytes At regular competition Vladik and Valera won a and ...
- python SQLAchemy外键关联
join 1.利用filter import sqlalchemy from sqlalchemy import create_engine from sqlalchemy.ext.declarati ...
- SQL删除多列语句的写法
SQL删除表中多个列的写法: ALTER TABLE table_name DROP COLUMN COLUMN1,COLUMN COLUMN2,COLUMN COLUMN3 ……
- 24点-code1
#include <iostream> #include <string> #include <cstdlib> #include <cmath> us ...
- mongodb数据库集合操作
1:更新update update() 方法用于更新已存在的文档.语法格式如下: db.collection.update( <query>, <update>, { upse ...
- 记一次使用MemoryCache不能Get的问题
在.NET Core自带的Angular模板项目中,我想要做一个简单的登录认证. 所以想填写用户名密码,使用guid作为key,存储登录信息,每次页面刷新的时候check它. 思路觉得没有问题,但是一 ...
- 数据库聚焦与非聚焦索引 事务处理 redis innodb引擎(九)
1 数据库事务处理 一个数据库事务通常包含对数据库进行读或写的一个操作序列 . 当一个事务被提交给了DBMS(数据库管理系统),则DBMS需要确保该事务中的所有操作都成功完成且其结果被永久保存在数据库 ...
- Exchange 2016 体系结构简介
一.Exchange 2016简介 现在,CPU计算能力的成本显著降低,不再成为约束因素.随着此约束因素的消失,Exchange2016的主要设计目标是简化扩展.提高硬件利用率和实现故障隔离:在Exc ...
- 数据库JDBC的基本内容
JDBC 基本流程 首先向项目中导入jar包 创建如下代码 Class.forName("com.mysql.jdbc.Driver"); String url = "j ...