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

简介: 问题:在使用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"
});
});

不然会有下面的

目录
相关文章
|
小程序
小程序中点击子元素事件而不触发父元素的点击事件
小程序中点击子元素事件而不触发父元素的点击事件
156 0
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2759 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
4月前
|
JavaScript
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
94 4
|
4月前
|
JavaScript
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
48 1
|
6月前
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
|
6月前
关于实现点击父元素点击后显示子元素,但点击子元素不消失的方法(阻止事件传递)
关于实现点击父元素点击后显示子元素,但点击子元素不消失的方法(阻止事件传递)
45 0
|
6月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
|
JavaScript
js监听页面或元素scroll事件,滚动到底部或顶部
js监听页面或元素scroll事件,滚动到底部或顶部
1246 0
js监听页面或元素scroll事件,滚动到底部或顶部
|
Web App开发 JavaScript Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,往上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。
384 0
|
JavaScript 小程序 Android开发
讲述小程序之组件picker(从底部弹起的滚动选择器)
讲述小程序之组件picker(从底部弹起的滚动选择器)
364 0
讲述小程序之组件picker(从底部弹起的滚动选择器)