在bootstrap的官网中了解到modal弹出只是支持单个,对于嵌套的modal并没有提供相应的解决方案,本文这里就根据网上找到的案例进行整理得到。
解决方案
主要是通过对modal的zindex进行赋值,使最新弹出的modal总是在最前面的。
$(document).ready(function () {
// 通过该方法来为每次弹出的模态框设置最新的zIndex值,从而使最新的modal显示在最前面
$(document).on('show.bs.modal', '.modal', function (event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
// setTimeout(function() {
// $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
// }, 0);
});
});
Paste_Image.png
整个样例代码如下:
测试多个modal弹出功能层叠的Bootstrap Modal样例
$(document).ready(function () {
// 通过该方法来为每次弹出的模态框设置最新的zIndex值,从而使最新的modal显示在最前面
$(document).on('show.bs.modal', '.modal', function (event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
// setTimeout(function() {
// $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
// }, 0);
});
});