Überlagerung mehrerer Modalitäten

Ich brauche, dass das Overlay über dem ersten Modal angezeigt wird, nicht auf der Rückseite.

$('#openBtn').click(function(){
	$('#myModal').modal({show:true})
});

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          <br>
          <br>
          <br>
          <br>
          <br>
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Second Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>

Ich habe versucht, das z-indexvon zu ändern .modal-backdrop, aber es wird ein Chaos.

In einigen Fällen habe ich mehr als zwei Modalitäten auf derselben Seite.

Nachdem ich viele Korrekturen dafür gesehen hatte und keine genau das war, was ich brauchte, habe ich eine noch kürzere Lösung gefunden, die von @YermoLamers & @Ketwaroo inspiriert ist .

Hintergrund-Z-Index-Fix
Diese Lösung verwendet a, setTimeoutda das .modal-backdropnicht erstellt wird, wenn das Ereignis show.bs.modalausgelöst wird.

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
});

• Dies funktioniert für alle .modalauf der Seite erstellten (auch für dynamische Modalitäten).
• Der Hintergrund überlagert sofort das vorherige Modal

Beispiel jsfiddle

Wenn Ihnen der fest codierte Z-Index aus irgendeinem Grund nicht gefällt, können Sie den höchsten Z-Index auf der Seite folgendermaßen berechnen :

var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
  return +el.style.zIndex;
})) + 10;

Korrektur der Bildlaufleiste
Wenn Ihre Seite ein Modal enthält, das die Browserhöhe überschreitet, können Sie beim Schließen eines zweiten Modals nicht darin scrollen. Um dies zu beheben, fügen Sie hinzu:

$(document).on('hidden.bs.modal', '.modal', function () {
    $('.modal:visible').length && $(document.body).addClass('modal-open');
});

Versionen
Diese Lösung wurde mit Bootstrap 3.1.0 - 3.3.5 getestet

Mir ist klar, dass eine Antwort akzeptiert wurde, aber ich empfehle dringend, Bootstrap nicht zu hacken, um dies zu beheben.

Sie können den gleichen Effekt ziemlich einfach erzielen, indem Sie die Ereignishandler für die angezeigten.bs.modal- und hidden.bs.modal-Ereignisse einbinden und dort den Z-Index anpassen.

Hier ist ein Arbeitsbeispiel

Ein bisschen mehr Infos gibt es hier.

Diese Lösung funktioniert automatisch mit beliebig tief gestapelten Modalen.

Der Skript-Quellcode:

$(document).ready(function() {

    $('.modal').on('hidden.bs.modal', function(event) {
        $(this).removeClass( 'fv-modal-stack' );
        $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
    });

    $('.modal').on('shown.bs.modal', function (event) {
        // keep track of the number of open modals
        if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
            $('body').data( 'fv_open_modals', 0 );
        }

        // if the z-index of this modal has been set, ignore.
        if ($(this).hasClass('fv-modal-stack')) {
            return;
        }

        $(this).addClass('fv-modal-stack');
        $('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
        $(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
        $('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
        $('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack'); 

    });        
});

Eine kürzere Version, die auf dem Vorschlag von Yermo Lamers basiert, scheint in Ordnung zu sein. Selbst mit grundlegenden Animationen wie Ein- / Ausblenden und sogar verrückten Batman-Zeitungen drehen. http://jsfiddle.net/ketwaroo/mXy3E/

$('.modal').on('show.bs.modal', function(event) {
    var idx = $('.modal:visible').length;
    $(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
    var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
    $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
    $('.modal-backdrop').not('.stacked').addClass('stacked');
});

Als ich die Antwort von A1rPun mit dem Vorschlag von StriplingWarrior kombinierte, kam ich auf Folgendes:

$(document).on({
    'show.bs.modal': function () {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    },
    'hidden.bs.modal': function() {
        if ($('.modal:visible').length > 0) {
            // restore the modal-open class to the body element, so that scrolling works
            // properly after de-stacking a modal.
            setTimeout(function() {
                $(document.body).addClass('modal-open');
            }, 0);
        }
    }
}, '.modal');

Funktioniert auch für dynamische Modalitäten, die nachträglich hinzugefügt wurden, und behebt das Problem mit der zweiten Bildlaufleiste. Das Bemerkenswerteste, für das ich dies nützlich fand, war die Integration von Formularen in Modalitäten mit Validierungsfeedback von Bootbox-Warnungen, da diese dynamische Modalitäten verwenden und Sie das Ereignis daher eher an ein Dokument als an .modal binden müssen, da es nur an vorhandene angehängt wird Modalitäten.

Geige hier.

Ich habe ein Bootstrap-Plugin erstellt, das viele der hier veröffentlichten Ideen enthält.

Demo auf Bootply: http://www.bootply.com/cObcYInvpq

Github: https://github.com/jhaygt/bootstrap-multimodal

Es wird auch das Problem mit aufeinanderfolgenden Modalitäten behoben, die dazu führen, dass der Hintergrund immer dunkler wird. Dadurch wird sichergestellt, dass jeweils nur ein Hintergrund sichtbar ist:

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

Der Z-Index des sichtbaren Hintergrunds wird sowohl bei show.bs.modalals auch bei hidden.bs.modalEreignissen aktualisiert :

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));

Beim Lösen von Stapelmodal-Bildlaufblättern auf der Hauptseite beim Schließen stellte ich fest, dass neuere Versionen von Bootstrap (zumindest seit Version 3.0.3) keinen zusätzlichen Code zum Stapeln von Modalen benötigen.

Sie können Ihrer Seite mehr als ein Modal hinzufügen (natürlich mit einer anderen ID). Das einzige Problem beim Öffnen von mehr als einem Modal ist, dass beim Schließen eines Modals die modal-openKlasse für den Body Selector entfernt wird.

Sie können den folgenden Javascript-Code verwenden, um Folgendes erneut hinzuzufügen modal-open:

$('.modal').on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
    $('body').addClass('modal-open');
    }    
});

Für den Fall, dass der Hintergrundeffekt für das gestapelte Modal nicht benötigt wird, können Sie einstellen data-backdrop="false".

Version 3.1.1. Der modale Hintergrund, der die Bildlaufleiste des Modals überlagert, wurde korrigiert . Die obige Lösung scheint jedoch auch mit früheren Versionen zu funktionieren.

Endlich gelöst. Ich habe es auf viele Arten getestet und funktioniert gut.

Hier ist die Lösung für alle, die das gleiche Problem haben: Ändern Sie die Funktion Modal.prototype.show (unter bootstrap.js oder modal.js).

VON:

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

ZU:

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

Es ist der beste Weg, den ich gefunden habe: Überprüfen Sie, wie viele Modalitäten geöffnet sind, und ändern Sie den Z-Index des Modals und des Hintergrunds auf einen höheren Wert.

Wenn Sie nach einer Bootstrap 4-Lösung suchen, gibt es eine einfache Lösung mit reinem CSS:

.modal.fade {
    background: rgba(0,0,0,0.5);
}

Versuchen Sie, Ihrem JS beim Booten Folgendes hinzuzufügen

$('#myModal2').on('show.bs.modal', function () {  
$('#myModal').css('z-index', 1030); })

$('#myModal2').on('hidden.bs.modal', function () {  
$('#myModal').css('z-index', 1040); })

Erläuterung:

Nachdem ich mit den Attributen herumgespielt habe (mit dem Entwicklertool von Chrome), habe ich festgestellt, dass jeder der folgenden z-indexWerte 1031die Dinge hinter den Hintergrund stellt.

Durch die Verwendung der modalen Ereignis-Handles von Bootstrap habe ich das z-indexauf gesetzt 1030. Wenn #myModal2angezeigt wird und setzen Sie den z-indexRücken auf 1040if #myModal2ist versteckt.

Demo

Jedes Mal, wenn Sie die Funktion sys.showModal ausführen, erhöhen Sie den Z-Index und setzen Sie ihn auf Ihr neues Modal.

function system() {

    this.modalIndex = 2000;

    this.showModal = function (selector) {
        this.modalIndex++;

        $(selector).modal({
            backdrop: 'static',
            keyboard: true
        });
        $(selector).modal('show');
        $(selector).css('z-index', this.modalIndex );       
    }

}

var sys = new system();

sys.showModal('#myModal1');
sys.showModal('#myModal2');

Die Lösung für dieses Problem bestand für mich darin, die "Fade" -Klasse NICHT für meine modalen Divs zu verwenden.

Keine Skriptlösungen, die nur CSS verwenden, vorausgesetzt, Sie haben zwei Modalebenen, setzen das 2. Modal auf einen höheren Z-Index

.second-modal { z-index: 1070 }

div.modal-backdrop + div.modal-backdrop {
   z-index: 1060; 
}

Wenn Sie möchten, dass ein bestimmtes Modal über einem anderen offenen Modal angezeigt wird, fügen Sie den HTML-Code des obersten Modals nach dem anderen Modal hinzu div.

Das hat bei mir funktioniert:

<div id="modal-under" class="modal fade" ... />

<!--
This modal-upper should appear on top of #modal-under when both are open.
Place its HTML after #modal-under. -->
<div id="modal-upper" class="modal fade" ... />

Meine Lösung für Bootstrap 4, die mit unbegrenzter Modaltiefe und dynamischem Modal arbeitet.

$('.modal').on('show.bs.modal', function () {
    var $modal = $(this);
    var baseZIndex = 1050;
    var modalZIndex = baseZIndex + ($('.modal.show').length * 20);
    var backdropZIndex = modalZIndex - 10;
    $modal.css('z-index', modalZIndex).css('overflow', 'auto');
    $('.modal-backdrop.show:last').css('z-index', backdropZIndex);
});
$('.modal').on('shown.bs.modal', function () {
    var baseBackdropZIndex = 1040;
    $('.modal-backdrop.show').each(function (i) {
        $(this).css('z-index', baseBackdropZIndex + (i * 20));
    });
});
$('.modal').on('hide.bs.modal', function () {
    var $modal = $(this);
    $modal.css('z-index', '');
});

Jedes Modal sollte eine andere ID erhalten und jeder Link sollte auf eine andere Modal-ID ausgerichtet sein. Also sollte es so etwas sein:

<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...

BEARBEITEN: Bootstrap 3.3.4 hat dieses Problem (und andere modale Probleme) gelöst. Wenn Sie also Ihr Bootstrap-CSS und JS aktualisieren können, ist dies die beste Lösung. Wenn Sie die unten stehende Lösung nicht aktualisieren können, funktioniert sie weiterhin und funktioniert im Wesentlichen genauso wie Bootstrap 3.3.4 (Neuberechnung und Anwenden von Padding).

Wie Bass Jobsen betonte, haben neuere Versionen von Bootstrap den Z-Index gelöst. Die Modal-Open-Klasse und das Padding-Recht waren für mich immer noch Probleme, aber dieses von der Lösung von Yermo Lamers inspirierte Skript löst es. Legen Sie es einfach in Ihrer JS-Datei ab und genießen Sie.

$(document).on('hide.bs.modal', '.modal', function (event) {
    var padding_right = 0;
    $.each($('.modal'), function(){
        if($(this).hasClass('in') && $(this).modal().data('bs.modal').scrollbarWidth > padding_right) {
            padding_right = $(this).modal().data('bs.modal').scrollbarWidth
        }
    });
    $('body').data('padding_right', padding_right + 'px');
});

$(document).on('hidden.bs.modal', '.modal', function (event) {
    $('body').data('open_modals', $('body').data('open_modals') - 1);
    if($('body').data('open_modals') > 0) {
        $('body').addClass('modal-open');
        $('body').css('padding-right', $('body').data('padding_right'));
    }
});

$(document).on('shown.bs.modal', '.modal', function (event) {
    if (typeof($('body').data('open_modals')) == 'undefined') {
        $('body').data('open_modals', 0);
    }
    $('body').data('open_modals', $('body').data('open_modals') + 1);
    $('body').css('padding-right', (parseInt($('body').css('padding-right')) / $('body').data('open_modals') + 'px'));
});

Schau dir das an! Diese Lösung löste das Problem für mich, einige einfache CSS-Zeilen:

.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

Hier ist ein Link, wo ich es gefunden habe: Bootply Stellen Sie einfach sicher, dass das .modual, das oben angezeigt werden muss, im HTML-Code an zweiter Stelle steht, damit CSS es als "gerade" finden kann.

Arbeit für Open / Close-Multimodale

jQuery(function()
{
    jQuery(document).on('show.bs.modal', '.modal', function()
    {
        var maxZ = parseInt(jQuery('.modal-backdrop').css('z-index')) || 1040;

        jQuery('.modal:visible').each(function()
        {
            maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
        });

        jQuery('.modal-backdrop').css('z-index', maxZ);
        jQuery(this).css("z-index", maxZ + 1);
        jQuery('.modal-dialog', this).css("z-index", maxZ + 2);
    });

    jQuery(document).on('hidden.bs.modal', '.modal', function () 
    {
        if (jQuery('.modal:visible').length)
        {
            jQuery(document.body).addClass('modal-open');

           var maxZ = 1040;

           jQuery('.modal:visible').each(function()
           {
               maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
           });

           jQuery('.modal-backdrop').css('z-index', maxZ-1);
       }
    });
});

Demo

https://www.bootply.com/cObcYInvpq#

Hier sind einige CSS mit nth-of-typeSelektoren, die zu funktionieren scheinen:

.modal:nth-of-type(even) {
    z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

Bootply: http://bootply.com/86973

Ich hatte ein ähnliches Szenario und nach ein wenig Forschung und Entwicklung fand ich eine Lösung. Obwohl ich in JS nicht besonders gut bin, habe ich es dennoch geschafft, eine kleine Abfrage aufzuschreiben.

http://jsfiddle.net/Sherbrow/ThLYb/

<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test1 <p>trerefefef</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">tst2 <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test3 <p>afsasfafafsa</p></div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>





$('.ingredient-item').on('click', function(e){

   e.preventDefault();

    var content = $(this).find('p').text();

    $('.modal-body').html(content);

});

Fügen Sie eine globale Variable in modal.js hinzu

var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data 

// Funktion in Variable hinzufügen anzeigen - Modal.prototype.backdrop

var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

modalConIndex = modalConIndex + 2; // add this line inside "Modal.prototype.show"

that.$element
    .show()
    .scrollTop(0)
that.$element.css('z-index',modalConIndex) // add this line after show modal 

if (this.isShown && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

      modalBGIndex = modalBGIndex + 2; // add this line increase modal background index 2+

this.$backdrop.addClass('in')
this.$backdrop.css('z-index',modalBGIndex) // add this line after backdrop addclass

Die anderen Lösungen haben bei mir nicht sofort funktioniert. Ich denke, vielleicht, weil ich eine neuere Version von Bootstrap (3.3.2) verwende ... das Overlay wurde oben im modalen Dialogfeld angezeigt.

Ich habe den Code ein wenig überarbeitet und den Teil auskommentiert, der den modalen Hintergrund anpasste. Dies hat das Problem behoben.

    var $body = $('body');
    var OPEN_MODALS_COUNT = 'fv_open_modals';
    var Z_ADJUSTED = 'fv-modal-stack';
    var defaultBootstrapModalZindex = 1040;

    // keep track of the number of open modals                   
    if ($body.data(OPEN_MODALS_COUNT) === undefined) {
        $body.data(OPEN_MODALS_COUNT, 0);
    }

    $body.on('show.bs.modal', '.modal', function (event)
    {
        if (!$(this).hasClass(Z_ADJUSTED))  // only if z-index not already set
        {
            // Increment count & mark as being adjusted
            $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) + 1);
            $(this).addClass(Z_ADJUSTED);

            // Set Z-Index
            $(this).css('z-index', defaultBootstrapModalZindex + (1 * $body.data(OPEN_MODALS_COUNT)));

            //// BackDrop z-index   (Doesn't seem to be necessary with Bootstrap 3.3.2 ...)
            //$('.modal-backdrop').not( '.' + Z_ADJUSTED )
            //        .css('z-index', 1039 + (10 * $body.data(OPEN_MODALS_COUNT)))
            //        .addClass(Z_ADJUSTED);
        }
    });
    $body.on('hidden.bs.modal', '.modal', function (event)
    {
        // Decrement count & remove adjusted class
        $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) - 1);
        $(this).removeClass(Z_ADJUSTED);
        // Fix issue with scrollbar being shown when any modal is hidden
        if($body.data(OPEN_MODALS_COUNT) > 0)
            $body.addClass('modal-open');
    });

Wenn Sie dies in AngularJs verwenden möchten, fügen Sie den Code einfach in die .run () -Methode Ihres Moduls ein.

Leider habe ich nicht den Ruf, einen Kommentar abzugeben, aber es sollte beachtet werden, dass die akzeptierte Lösung mit der fest codierten Basislinie eines 1040-Z-Index der zIndex-Berechnung überlegen zu sein scheint, die versucht, den maximalen zIndex zu finden, der auf der Seite gerendert wird.

Es scheint, dass bestimmte Erweiterungen / Plugins auf DOM-Inhalten der obersten Ebene basieren, was die .Max-Berechnung zu einer so obszön großen Zahl macht, dass der zIndex nicht weiter erhöht werden kann. Dies führt zu einem Modal, bei dem das Overlay falsch über dem Modal angezeigt wird (wenn Sie Firebug / Google Inspector-Tools verwenden, wird ein zIndex in der Größenordnung von 2 ^ n - 1 angezeigt).

Ich konnte nicht herausfinden, aus welchem ​​Grund die verschiedenen Formen von Math.Max ​​für z-Index zu diesem Szenario führen, aber es kann vorkommen, dass es für einige Benutzer eindeutig erscheint. (Bei meinen allgemeinen Tests auf dem Browserstack funktionierte dieser Code perfekt).

Hoffe das hilft jemandem.

In meinem Fall wurde das Problem durch eine Browsererweiterung verursacht, die die Dateien bootstrap.js enthält, in denen das Show-Ereignis zweimal behandelt und zwei modal-backdropDivs hinzugefügt wurden. Beim Schließen des Modals wird jedoch nur eine davon entfernt.

Es wurde festgestellt, dass durch Hinzufügen eines Haltepunkts für die Änderung eines Teilbaums zum Body-Element in Chrome verfolgt und das Hinzufügen der modal-backdropDivs verfolgt wurde.

$(window).scroll(function(){
    if($('.modal.in').length && !$('body').hasClass('modal-open'))
    {
              $('body').addClass('modal-open');
    }

});

Update: 22.01.2019, 13.41 Ich habe die Lösung von jhay optimiert, die auch das Schließen und Öffnen gleicher oder unterschiedlicher Dialoge unterstützt, wenn beispielsweise von einem Detail zum nächsten vorwärts oder rückwärts gewechselt wird.

(function ($, window) {
'use strict';

var MultiModal = function (element) {
    this.$element = $(element);
    this.modalIndex = 0;
};

MultiModal.BASE_ZINDEX = 1040;

/* Max index number. When reached just collate the zIndexes */
MultiModal.MAX_INDEX = 5;

MultiModal.prototype.show = function (target) {
    var that = this;
    var $target = $(target);

    // Bootstrap triggers the show event at the beginning of the show function and before
    // the modal backdrop element has been created. The timeout here allows the modal
    // show function to complete, after which the modal backdrop will have been created
    // and appended to the DOM.

    // we only want one backdrop; hide any extras
    setTimeout(function () {
        /* Count the number of triggered modal dialogs */
        that.modalIndex++;

        if (that.modalIndex >= MultiModal.MAX_INDEX) {
            /* Collate the zIndexes of every open modal dialog according to its order */
            that.collateZIndex();
        }

        /* Modify the zIndex */
        $target.css('z-index', MultiModal.BASE_ZINDEX + (that.modalIndex * 20) + 10);

        /* we only want one backdrop; hide any extras */
        if (that.modalIndex > 1) 
            $('.modal-backdrop').not(':first').addClass('hidden');

        that.adjustBackdrop();
    });

};

MultiModal.prototype.hidden = function (target) {
    this.modalIndex--;
    this.adjustBackdrop();

    if ($('.modal.in').length === 1) {

        /* Reset the index to 1 when only one modal dialog is open */
        this.modalIndex = 1;
        $('.modal.in').css('z-index', MultiModal.BASE_ZINDEX + 10);
        var $modalBackdrop = $('.modal-backdrop:first');
        $modalBackdrop.removeClass('hidden');
        $modalBackdrop.css('z-index', MultiModal.BASE_ZINDEX);

    }
};

MultiModal.prototype.adjustBackdrop = function () {        
    $('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (this.modalIndex * 20));
};

MultiModal.prototype.collateZIndex = function () {

    var index = 1;
    var $modals = $('.modal.in').toArray();


    $modals.sort(function(x, y) 
    {
        return (Number(x.style.zIndex) - Number(y.style.zIndex));
    });     

    for (i = 0; i < $modals.length; i++)
    {
        $($modals[i]).css('z-index', MultiModal.BASE_ZINDEX + (index * 20) + 10);
        index++;
    };

    this.modalIndex = index;
    this.adjustBackdrop();

};

function Plugin(method, target) {
    return this.each(function () {
        var $this = $(this);
        var data = $this.data('multi-modal-plugin');

        if (!data)
            $this.data('multi-modal-plugin', (data = new MultiModal(this)));

        if (method)
            data[method](target);
    });
}

$.fn.multiModal = Plugin;
$.fn.multiModal.Constructor = MultiModal;

$(document).on('show.bs.modal', function (e) {
    $(document).multiModal('show', e.target);
});

$(document).on('hidden.bs.modal', function (e) {
    $(document).multiModal('hidden', e.target);
});}(jQuery, window));

Für mich haben diese einfachen scss-Regeln perfekt funktioniert:

.modal.show{
  z-index: 1041;
  ~ .modal.show{
    z-index: 1043;
  }
}
.modal-backdrop.show {
  z-index: 1040;
  + .modal-backdrop.show{
    z-index: 1042;
  }
}

Wenn diese Regeln dazu führen, dass in Ihrem Fall das falsche Modal oben steht, ändern Sie entweder die Reihenfolge Ihrer Modal-Divs oder ändern Sie (ungerade) in (gerade) in den obigen scss.

Überprüfen Sie die Anzahl der Modalitäten und fügen Sie den Wert als Z-Index zum Hintergrund hinzu

    var zIndex = 1500 + ($('.modal').length*2) + 1;
    this.popsr.css({'z-index': zIndex});

    this.popsr.on('shown.bs.modal', function () {
        $(this).next('.modal-backdrop').css('z-index', zIndex - 1);
    });

    this.popsr.modal('show');