Bootstrap: modal über modal

Question

Ich habe versucht, eine einfache Funktion zu finden, die Modale aufeinander überlagern würde, so dass ein Modal einen zweiten auslösen könnte. Das bedeutet, dass die Modale über den Z-Index übereinander liegen müssen und wir daher dasselbe für den Hintergrund (das transluzente Overlay) tun müssen.

Ich fand ein paar Plugins, einige Antworten mit reinem CSS etc. Hier ist meins, falls es Ihnen helfen kann, müssen Sie nichts als diese paar Zeilen hinzufügen!

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

Erläuterung: Jedes Mal, wenn ein modaler eröffnet, zählen wir die bestehenden Modalverben und sie Zahlen geben ihnen (Daten-nmodals Attribut) zu identifizieren. Da der Hintergrund ein paar Sekunden später erscheint, warten wir 100 Millisekunden, bevor wir diese in der backduckStack-Funktion zählen. Last but not least multipliziert die modalStack-Funktion den vorhandenen Z-Index-Wert mit der nModals-Zahl, was bedeutet, dass wir bis zu 20 Modale öffnen könnten und diese Lösung noch funktionieren würde.

Das Limit ist der maximale von CSS3 und Browser akzeptierte Z-Index. Wenn Sie zu diesem Punkt kommen ... haben Sie wahrscheinlich ein UX-Design-Problem!