Bootstrap：模态而不是模态[重复]答案

【问题标题】：Bootstrap: modal over modal [duplicate]Bootstrap：模态而不是模态[重复]
【发布时间】：2016-07-24 03:01:00
【问题描述】：

我试图找到一个简单的函数，可以将模态相互叠加，以便一个模态可以触发第二个模态。这意味着模态框必须使用 z-index 在另一个之上，因此我们需要对背景（半透明覆盖）做同样的事情。

我发现了一些插件，一些使用纯 css 的答案等。这是我的，以防万一它可以帮助你，你不需要添加任何东西，除了这几行！

【问题讨论】：

【解决方案1】：

$('.modal').on('show.bs.modal', function() {
        var nModals = $('.modal.in').length;
        $(this).attr('data-nmodals', nModals+1);
        backdropStack(nModals);
    });
    function backdropStack(nModals) {
        setTimeout(function() {
            $('.modal-backdrop').each(function() {
                if(!$(this).attr('data-nmodals')) {
                    $(this).attr('data-nmodals', nModals+1);
                }
            });
            modalStack();
        }, 100);
    };
    function modalStack() {
        $('.modal').each(function() {
            $n = $(this).data('nmodals');
            $z = $(this).css('z-index');
            $(this).css('z-index', $n*$z);
        });
        $('.modal-backdrop').each(function() {
            $n = $(this).data('nmodals');
            $z = $(this).css('z-index');
            $(this).css('z-index', $n*$z);
        });
    }

说明：每次打开一个模态时，我们都会计算现有的模态并给它们编号以识别它们（data-nmodals 属性）。由于背景会在几秒钟后出现，因此我们等待 100 毫秒，然后再计算背景堆栈函数中的背景。最后但同样重要的是，modalStack 函数将现有的 z-index 值与 nModals 数相乘，这意味着我们可以打开多达 20 个模态，并且这个解决方案仍然有效。

限制是 CSS3 和浏览器接受的最大 z-index。如果你达到了这一点......你可能有一个用户体验设计问题！

【讨论】：