bootstrap弹出多个模态框_bootstrap中多个modal弹出的问题解决方案

在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样例

弹出第一个modal

×

第一个Modal

这是第一个modal，接下来弹出的modal会以这个为基准弹出新的modal框

弹出另一个modal

关闭

保存

×

第二个modal

这是另一个modal，是在前一个modal的基础上弹出一个新的模态框

弹出第三个modal

关闭

保存

×

Modal 3

百度提供的一些cdn库

关闭

$(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);

});

});