bootstrap3官网明确指出

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

bootstrap3相关源码分析

开发过程中经常会遇到在一个模态框上弹出另一个模态框，

bootstrap.css中 模态框的z-index为1050

.modal {
    position: fixed;
    top: 0;right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

遮罩层z-index为1040

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

分析之后的解决方案

那么要想再添加模态框的遮罩层覆盖上一个的模态框，那么这时的遮罩层的z-index必须大于上一个模态框的z-index，并且新的模态框的z-index也必须改变；所以：

var modalLen = $(".modal-backdrop").length;
zIndex = $(".modal-backdrop").eq(0).css("z-index");
for(var i = 1; i < modalLen; i ++){
    $(".modal-backdrop").eq(i).css({
        "z-index": zIndex + i * 10 + 1
    });
    $(".modal.in").eq(i).css({
        "z-index": zIndex + (i + 1) * 10 + 1
    });
}

注意：此种方式的必须注意一点的是  新弹出的模态框div必须在上一个模态框div的后面

把上面的代码放在 bootstrap.js这句代码的前面:

var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })