Question

我试图找到一个简单的函数来叠加彼此的模态，这样一个模态就可以触发第二个模态。这意味着使用z-index，模态必须是一个，因此我们需要对背景（半透明叠加）执行相同的操作。

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

Answer 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毫秒才能计算backdropStack函数中的那些。最后但并非最不重要的是，modalStack函数将现有的z-index值与nModals数相乘，这意味着我们最多可以打开20个模态，这个解决方案仍然可以解决。

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

Bootstrap：modal over modal

1 个答案: