bootstrap中如果在模态框弹出模态框,即多重模态框,那么在关闭模态框后,上一级的模态框无法滚动,而且滚动事件会穿透到body层。
原理是只要有modal被打开,body会被赋予modal-open这个类,使其overflow变为hidden,无法滚动;而只要有modal被关闭,body的modal-open这个类就会被remove掉。
解决方案:在非最上层modelmodal监听隐藏事件,为body重新添加modal-open类:
$(w).on("hidden.bs.modal", function () {
$(this).removeData("bs.modal");
$(document.body).addClass("modal-open");
$(w).find("div.modal-content").html("");
});
model封装:
function openModal(url, width, height, popId, callBack) {
if (!popId) {
var random = Math.floor(Math.random() * 100);
popId = "viewWindw_" + random;
}
var templet = '<div id="' + popId + '" class="modal fade" aria-hidden="true" aria-labelledby="' + popId + 'Label' + '">'
+ '<div class="modal-dialog" role="document">'
+ '<div class="modal-content">'
+ '<div class="modal-body"></div>'
+ '</div>'
+ '</div>'
+ '</div>';
$(document.body).append(templet);
if (height)
$('.modal-dialog').height(height);
if (width)
$('.modal-dialog').width(width);
var w = "#" + popId;
$(w).modal({
remote: url
});
$(w).on("hidden.bs.modal", function () {
$(this).removeData("bs.modal");
$(w).find("div.modal-content").html("");
});
if (null != callBack && isFunction(callBack)) {
$(w).on("loaded.bs.modal", callBack);
}
return w;
}
相关推荐
bootstrap 打开多层模态框的情况下,关闭任意一个模态框,都会导致其余模态框的滚动条消失。 监测html发现,当打开模态框时,会给 body 元素加一个 modal-open 的 class,而在 bootstrap.css 中,有这样一条 css ...
bootstrap-modal 扩展了 Bootstrap 内置的 modal 以提供附加功能,引入了 ModalManager 类可处理多个 modal 并侦听它们的事件。 一个简单的 ModalManager 的创建方式: $('body').modalmanager('loading'); ...
bootstrap的tbody加竖向滚动条,而且当前表格的表头。bootstrap的tbody加竖向滚动条,而且当前表格的表头。bootstrap的tbody加竖向滚动条,而且当前表格的表头。
react-bootstrap-modal, jschr Bootstrap 模式更好的反应端口 响应 Bootstrap 模式部分是 Bootstrap Modal的jschr 。 Reimplements模式下的Twitter Bootstrap 模式组件。 基于反应引导团队的原始工作。注意:如果你...
资源来自pypi官网。 资源全名:django-bootstrap-modal-forms-1.4.0.tar.gz
移动WEB应用实践:Bootstrap应用实践之Bootstrap Modal文章的示例代码 文章地址:http://blog.csdn.net/rowisdom/article/details/17004701
jq插件bootstrap-modal.js模态框引入文件
本文档适用于list-group+list-group-item组合形式,但不适合在item中再次放置col样式,该问题本人暂时未解决,有解决方法请及时告知本人。
jQuery Bootstrap响应式新闻列表文字上下滚动特效
主要介绍了 Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题,需要的朋友可以参考下
Vue Bootstrap Modal是一个可重用的组件,您可以在需要显示简单的模式弹出窗口时在整个项目中使用。 因此,您不必每次都想使用引导程序模式时重复相同的html代码。 目录 开始吧 安装 npm install --save @...
好看的滚动条样式; HEIGHT: 140;OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#...
Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。 在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...
Bootstrap::Modal::Rails 为默认类提供的 Rails Asset Gem安装将这些行添加到应用程序的Gemfile : ### Rails 3 or previousgroup :assets do gem 'bootstrap-modal-rails'end### Rails 4gem 'bootstrap-modal-rails...
bootstrap中的模态框(modal),模态框以弹出对话框的形式出现,具有最小和最实用的功能
30 effects for bootstrap modal window
Bootstrap的Modal模态框取消时有多重阴影解决的JS代码,希望可以帮到大家!Bootstrap的Modal模态框取消时有多重阴影解决的JS代码,希望可以帮到大家!
vue2-bootstrap-modal Vue 2.x的Bootstrap模式组件更新了软件包以排除bootstrap css和js,您需要安装bootstrap-loader安装 npm install vue2-bootstrap-modal --save用法需要组件(全局或在另一个组件中) ...
#vue3-bootstrap-5-modal-component使用引导程序5的vue 3的简单模态组件 依存关系: 该组件需要安装Bootstrap 5和Popper npm install bootstrap@next npm install @popperjs/core 然后可以将它们包含在main.js...