Twitter bootstrap 引导：模式对模式

我试图找到一个简单的函数，将模态叠加在一起，这样一个模态就可以触发另一个模态。 这意味着模态必须是一个在另一个之上使用z索引，因此我们需要对背景做同样的处理（半透明覆盖）

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

$('.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);
        });
    }

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

限制是CSS3和浏览器接受的最大z索引。如果你说到这一点。。。您可能有用户体验设计问题