这是一个非常古老的威胁，但是，对我来说，只是工作移动模式的html代码，我想在前面的第一个地方的文件。

终于解决了。我对它进行了多种测试，效果很好。

以下是所有遇到同样问题的人的解决方案: 修改Modal.prototype.show函数(在bootstrap.js或modal.js中)

来自:

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

TO:

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

这是我发现的最好的方法:检查打开了多少个模态，并将模态和背景的z-index更改为更高的值。

这段代码非常适合用于引导4。其他代码中的问题是如何选择模态背景。这将是更好的，如果你使用jQuery的下一个选择在实际的模态已经显示。

(文档)。(“show.bs美元。模态”、“。Modal '， function () { var zIndex = 1040 + (10 * $('.modal').length); Var模型= $(this); model.css (z - index, zIndex); 模型。attr (data-z-index, zIndex); })； (文档)。(“shown.bs美元。模态”、“。Modal '， function () { Var模型= $(this); var zIndex = model.attr('data-z-index'); model.next('.modal- background .show').css('z-index'， zIndex - 1); })；

其他的解决方案在开箱即用时对我不起作用。我想可能是因为我使用的是Bootstrap(3.3.2)的最新版本....覆盖层出现在模态对话框的顶部。

我重构了一些代码，并注释掉了调整模式背景的部分。这解决了问题。

    var $body = $('body');
    var OPEN_MODALS_COUNT = 'fv_open_modals';
    var Z_ADJUSTED = 'fv-modal-stack';
    var defaultBootstrapModalZindex = 1040;

    // keep track of the number of open modals                   
    if ($body.data(OPEN_MODALS_COUNT) === undefined) {
        $body.data(OPEN_MODALS_COUNT, 0);
    }

    $body.on('show.bs.modal', '.modal', function (event)
    {
        if (!$(this).hasClass(Z_ADJUSTED))  // only if z-index not already set
        {
            // Increment count & mark as being adjusted
            $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) + 1);
            $(this).addClass(Z_ADJUSTED);

            // Set Z-Index
            $(this).css('z-index', defaultBootstrapModalZindex + (1 * $body.data(OPEN_MODALS_COUNT)));

            //// BackDrop z-index   (Doesn't seem to be necessary with Bootstrap 3.3.2 ...)
            //$('.modal-backdrop').not( '.' + Z_ADJUSTED )
            //        .css('z-index', 1039 + (10 * $body.data(OPEN_MODALS_COUNT)))
            //        .addClass(Z_ADJUSTED);
        }
    });
    $body.on('hidden.bs.modal', '.modal', function (event)
    {
        // Decrement count & remove adjusted class
        $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) - 1);
        $(this).removeClass(Z_ADJUSTED);
        // Fix issue with scrollbar being shown when any modal is hidden
        if($body.data(OPEN_MODALS_COUNT) > 0)
            $body.addClass('modal-open');
    });

顺便说一句，如果你想在AngularJs中使用它，只需将代码放在模块的.run()方法中即可。

每次你运行sys。showModal函数增加z-index并将其设置为新的模态。

function system() {

    this.modalIndex = 2000;

    this.showModal = function (selector) {
        this.modalIndex++;

        $(selector).modal({
            backdrop: 'static',
            keyboard: true
        });
        $(selector).modal('show');
        $(selector).css('z-index', this.modalIndex );       
    }

}

var sys = new system();

sys.showModal('#myModal1');
sys.showModal('#myModal2');

对我来说，这些简单的scss规则非常有效:

.modal.show{
  z-index: 1041;
  ~ .modal.show{
    z-index: 1043;
  }
}
.modal-backdrop.show {
  z-index: 1040;
  + .modal-backdrop.show{
    z-index: 1042;
  }
}

如果这些规则导致错误的模态在你的情况下，要么改变你的模态div的顺序，或者在上面的scss中改变(奇数)为(偶数)。