模态框中再嵌套模态框,关闭第二个模态框时,会导致第一个模态框的滚动条消失的情况

简介: 问题:在使用Bootstrap时,有时候会用到模态框中再嵌套模态框。这样就会出现一个问题,就是在关闭第二个模态框时,会导致第一个模态框的滚动条消失,这样就会使得屏幕太小而模态框太大看不到底部信息,而没法进行操作。

问题:在使用Bootstrap时,有时候会用到模态框中再嵌套模态框。这样就会出现一个问题,就是在关闭第二个模态框时,会导致第一个模态框的滚动条消失,这样就会使得屏幕太小而模态框太大看不到底部信息,而没法进行操作。

解决方法:就是在第二个模态框的关闭hide 方法调用之后立即触发的事件中,设置第一个模态框的样式,给其加一个样式:'overflow-y':'scroll'。

代码如下: myModalEdit是第二个模态框的id,myModal是第一个模态框的id

$('#myModalEdit').on('hidden.bs.modal', function() {

$('#myModal').css({'overflow-y':'scroll'});
});

如果bodybody还有滑动框,

//第二个模态框关闭触发事件,给第一个添加css样式
$('#people-selector1').on('hidden.bs.modal', function() {
$('#people-selector').css({'overflow-y':'scroll'});
$(document.body).css({//并取消body的滑动这是因为body还有滑动框
"overflow-y":"hidden"
});
});

不然会有下面的

目录
相关文章
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2797 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
5月前
|
JavaScript
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
52 1
|
7月前
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
|
7月前
关于实现点击父元素点击后显示子元素,但点击子元素不消失的方法(阻止事件传递)
关于实现点击父元素点击后显示子元素,但点击子元素不消失的方法(阻止事件传递)
50 0
|
7月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
|
前端开发
禁用div元素 —— css静止点击事件
禁用div元素 —— css静止点击事件
74 0
|
JavaScript
原生js实现复选框选全部框与取消全选框
原生js实现复选框选全部框与取消全选框
76 0
|
前端开发 JavaScript 计算机视觉
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
1120 0
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
|
Web App开发 JavaScript Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,往上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。
408 0
|
JavaScript 小程序 Android开发
讲述小程序之组件picker(从底部弹起的滚动选择器)
讲述小程序之组件picker(从底部弹起的滚动选择器)
370 0
讲述小程序之组件picker(从底部弹起的滚动选择器)