Bootstrap：modal over modal

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); 
     }); 
    } 

說明：每一個模式打開的時候，我們指望現有的模態，並給他們編號以便識別（數據nmodals屬性）。由於幾秒鐘後會出現背景，因此在計算BACKGROUNDStack函數中的值之前，我們需要等待100毫秒。 最後但並非最不重要的一點，modalStack函數將現有的z-index值與nModals數相乘，這意味着我們可以打開多達20個模態，並且此解決方案仍然可以運行。

該限制是CSS3和瀏覽器接受的最大z-索引。如果你到了這一點......你可能有UX設計問題！