如果你正在寻找Bootstrap 4的解决方案，有一个简单的使用纯CSS:

.modal.fade {
    background: rgba(0,0,0,0.5);
}

尝试在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

这段代码非常适合用于引导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); })；

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

适用于开启/关闭多种模式

jQuery(function()
{
    jQuery(document).on('show.bs.modal', '.modal', function()
    {
        var maxZ = parseInt(jQuery('.modal-backdrop').css('z-index')) || 1040;

        jQuery('.modal:visible').each(function()
        {
            maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
        });

        jQuery('.modal-backdrop').css('z-index', maxZ);
        jQuery(this).css("z-index", maxZ + 1);
        jQuery('.modal-dialog', this).css("z-index", maxZ + 2);
    });

    jQuery(document).on('hidden.bs.modal', '.modal', function () 
    {
        if (jQuery('.modal:visible').length)
        {
            jQuery(document.body).addClass('modal-open');

           var maxZ = 1040;

           jQuery('.modal:visible').each(function()
           {
               maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
           });

           jQuery('.modal-backdrop').css('z-index', maxZ-1);
       }
    });
});

演示

https://www.bootply.com/cObcYInvpq#

我创建了一个Bootstrap插件，它包含了这里发布的很多想法。

Bootply上的演示:http://www.bootply.com/cObcYInvpq

Github: https://github.com/jhaygt/bootstrap-multimodal

它还解决了连续情态动词导致背景变得越来越暗的问题。这确保在任何给定的时间只有一个背景可见:

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

可见背景的z指数在show.bs.modal和hidden.bs.modal事件中都被更新:

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));