bootstrap两层模态框无法滚动问题
2017-12-18 09:47
337 查看
在项目中使用bootstrap的模态框modal的时候碰到的这个问题。
因为业务需要,在第一层模态框中展示的列表信息,点击查看之后弹出详细信息或新增,这时候需要弹出第二层模态框。
问题就来了,当第二层模态框关闭之后(就是上面那层),下面的第一层模态框因为数据项太多,需要滚动下拉,
但是实际情况是,如果不做处理的话,这时候滚动下拉的就是父页面了。
在网上搜索之后,说是可以在关闭第二层模态框的时候禁掉父页面的下拉条,找到的解决方法如下:
在第二层模态框上加上类似如下js代码:
[javascript] view plain copy
$(‘#newChickItem’).on(‘hidden.bs.modal’, function () {
document.getElementsByTagName(‘body’)[0].className = ‘modal-open’;
});
大概就是在第二层模态框的时候禁掉父页面的下拉条,newChickItem就是第二层模态框的id了。
注意其中用=号就是把父页面的body的class替换掉了,因为用+=追加的话如果不刷新整体页面就会导致body的class中有很多modal-open,从而导致没有效果。
因为业务需要,在第一层模态框中展示的列表信息,点击查看之后弹出详细信息或新增,这时候需要弹出第二层模态框。
问题就来了,当第二层模态框关闭之后(就是上面那层),下面的第一层模态框因为数据项太多,需要滚动下拉,
但是实际情况是,如果不做处理的话,这时候滚动下拉的就是父页面了。
在网上搜索之后,说是可以在关闭第二层模态框的时候禁掉父页面的下拉条,找到的解决方法如下:
在第二层模态框上加上类似如下js代码:
[javascript] view plain copy
$(‘#newChickItem’).on(‘hidden.bs.modal’, function () {
document.getElementsByTagName(‘body’)[0].className = ‘modal-open’;
});
大概就是在第二层模态框的时候禁掉父页面的下拉条,newChickItem就是第二层模态框的id了。
注意其中用=号就是把父页面的body的class替换掉了,因为用+=追加的话如果不刷新整体页面就会导致body的class中有很多modal-open,从而导致没有效果。
相关文章推荐
- bootstrap两层模态框无法滚动问题
- Bootstrap3 多个模态对话框无法显示的问题
- Bootstrap3 多个模态对话框无法显示的问题
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器第二次无法加载的问题
- 在bootstrap中多层modal叠加导致页面无法滚动的问题
- bootstrap下modal模态框中webuploader控件按钮异常(无法点击)问题解决办法【转】
- Bootstrap3 多个模态对话框无法显示的问题
- Bootstrap的模态框中使用kindeditor无法编辑的问题
- Bootstrap中模态框多层嵌套时滚动条问题
- 如何解决Bootstrap的模态框在Framework7中使用出现遮罩无法显示的问题?
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器第二次无法加载的问题
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器 点击关闭弹窗 出现第二次无法加载的问题
- Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
- Bootstrap 模态框 select2搜索框无法输入
- 关于bootstrap模态框被灰色阴影遮罩挡住问题的分析
- 解决bootstrap下拉菜单无法隐藏的问题
- 两层用户控件嵌套时最里层CheckBox无法初始化状态的问题解决
- bootstrap 多重模态框 滚动条消失问题
- bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
- MWPhotoBrowser图片无法左右滚动切换的问题