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

Posted 2023-02-22

【中文标题】Bootstrap：模态而不是模态[重复]

【英文标题】：Bootstrap: modal over modal [duplicate]

【发布时间】：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。如果你达到了这一点......你可能有一个用户体验设计问题！