使用CSS进行Z-index和模态背景校正

.modal.fade {
  z-index: 10000000 !important;
  background: rgba(0, 0, 0, 0.5);
}
.modal-backdrop.fade {
  opacity: 0;
}

我意识到一个答案已经被接受，但我强烈建议不要破解bootstrap来解决这个问题。

通过连接show .bs.modal和hidden.bs.modal事件处理程序并在那里调整z-index，可以很容易地达到同样的效果。

下面是一个工作示例

更多信息可以在这里找到。

这个解决方案自动工作于任意深度的堆栈模态。

脚本源代码:

$(document).ready(function() {

    $('.modal').on('hidden.bs.modal', function(event) {
        $(this).removeClass( 'fv-modal-stack' );
        $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
    });

    $('.modal').on('shown.bs.modal', function (event) {
        // keep track of the number of open modals
        if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
            $('body').data( 'fv_open_modals', 0 );
        }

        // if the z-index of this modal has been set, ignore.
        if ($(this).hasClass('fv-modal-stack')) {
            return;
        }

        $(this).addClass('fv-modal-stack');
        $('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
        $(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
        $('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
        $('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack'); 

    });        
});

尝试在bootply上将以下内容添加到JS中

$('#myModal2').on('show.bs.modal', function () {  
$('#myModal').css('z-index', 1030); })

$('#myModal2').on('hidden.bs.modal', function () {  
$('#myModal').css('z-index', 1040); })

解释:

在摆弄了属性之后(使用Chrome的开发工具)，我意识到任何低于1031的z-index值都会把东西放在背景后面。

所以通过使用bootstrap的模态事件句柄，我将z-index设置为1030。如果显示#myModal2，如果隐藏#myModal2，则将z-index设置为1040。

Demo

编辑:Bootstrap 3.3.4已经解决了这个问题(和其他模式问题)，所以如果你可以更新你的Bootstrap CSS和JS，这将是最好的解决方案。如果你不能更新下面的解决方案仍然可以工作，基本上做同样的事情，bootstrap 3.3.4(重新计算和应用填充)。

Bass Jobsen指出，Bootstrap的新版本已经解决了z指数问题。模态开放类和填充右仍然是我的问题，但这个脚本的灵感来自Yermo Lamers解决方案解决了它。只要把它放到JS文件中就可以了。

$(document).on('hide.bs.modal', '.modal', function (event) {
    var padding_right = 0;
    $.each($('.modal'), function(){
        if($(this).hasClass('in') && $(this).modal().data('bs.modal').scrollbarWidth > padding_right) {
            padding_right = $(this).modal().data('bs.modal').scrollbarWidth
        }
    });
    $('body').data('padding_right', padding_right + 'px');
});

$(document).on('hidden.bs.modal', '.modal', function (event) {
    $('body').data('open_modals', $('body').data('open_modals') - 1);
    if($('body').data('open_modals') > 0) {
        $('body').addClass('modal-open');
        $('body').css('padding-right', $('body').data('padding_right'));
    }
});

$(document).on('shown.bs.modal', '.modal', function (event) {
    if (typeof($('body').data('open_modals')) == 'undefined') {
        $('body').data('open_modals', 0);
    }
    $('body').data('open_modals', $('body').data('open_modals') + 1);
    $('body').css('padding-right', (parseInt($('body').css('padding-right')) / $('body').data('open_modals') + 'px'));
});

结合A1rPun的回答和StriplingWarrior的建议，我想到了这个:

$(document).on({
    'show.bs.modal': function () {
        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);
    },
    'hidden.bs.modal': function() {
        if ($('.modal:visible').length > 0) {
            // restore the modal-open class to the body element, so that scrolling works
            // properly after de-stacking a modal.
            setTimeout(function() {
                $(document.body).addClass('modal-open');
            }, 0);
        }
    }
}, '.modal');

工作甚至动态模态添加后，并消除了第二个滚动条的问题。最值得注意的是，我发现这个功能很有用，它将模态中的表单与Bootbox警报的验证反馈集成在一起，因为这些使用动态模态，因此需要将事件绑定到document，而不是.modal，因为这只会将它附加到现有的模态。

小提琴。

注意:所有的答案都是“hacks”，因为Bootstrap不正式支持多种情态动词。

Bootstrap一次只支持一个模式窗口。嵌套的情态动词 不支持，因为我们认为它们的用户体验很差。”

这里有一些CSS的变通/技巧…

引导5.2(2023年更新)

这个版本有一点变化，因为Bootstrap现在自动隐藏任何其他打开的模态，当一个新的打开。因此，z-index CSS将不起作用。然而，通过一个小JS，你可以强制第一个模式保持打开，当第二个模式被显示时重新显示它…(再次强调，这是一个hack，因为Bootstrap不支持多个开放模式)

const myModal = bootstrap.Modal.getOrCreateInstance('#myModal')
const myModal2El = document.getElementById('myModal2')

// when 2nd modal is shown, reshow 1st modal
myModal2El.addEventListener('show.bs.modal', event => {
    // force re-show of modal 1
    myModal.show()
})

https://codeply.com/p/mYhmJ2fNau

引导5 beta版(2021年更新)

情态动词的默认z索引再次更改为1060。因此，要覆盖情态动词和背景的使用..

.modal:nth-of-type(even) {
    z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1061 !important;
}

https://codeply.com/p/yNgonlFihM

引导4中情态动词的z指数再次更改为1050。因此，要覆盖开放情态动词和背景的使用。

引导4。x(更新2018)

.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://codeply.com/p/29sH0ofTZb

引导3。x(原答案)

下面是一些CSS使用第n种类型的选择器，似乎是有效的:

    .modal:nth-of-type(even) {
        z-index: 1042 !important;
    }
    .modal-backdrop.in:nth-of-type(even) {
        z-index: 1041 !important;
    }

https://codeply.com/p/w8yjOM4DFb