it-swarm.com.de

Overlay für mehrere Modale

Ich brauche, dass das Overlay über dem ersten Modal angezeigt wird, nicht hinten.

 Modal overlay behind

$('#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, den z-index von .modal-backdrop zu ändern, aber es wird ein Durcheinander.

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

158

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

Backdrop Z-Index fix
Diese Lösung verwendet setTimeout, da der .modal-backdrop nicht erstellt wird, wenn das Ereignis show.bs.modal ausgelö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 jeden auf der Seite erstellten .modal (auch für dynamische Modale).
  • Der Hintergrund überlagert sofort die vorherige Modalität

Beispiel jsfiddle

Wenn Ihnen der hartcodierte 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;

Scrollbar fix
Wenn auf Ihrer Seite ein Modal vorhanden ist, das die Browserhöhe überschreitet, können Sie beim Schließen eines zweiten Modal nicht darin blättern. Um dies zu beheben, fügen Sie Folgendes hinzu:

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

Versionen
Diese Lösung wird mit bootstrap 3.1.0 - 3.3.5 getestet

350
A1rPun

Ich weiß, dass eine Antwort akzeptiert wurde, aber ich empfehle dringend, keinen Bootstrap zu hacken, um dies zu beheben. 

Sie können den gleichen Effekt ziemlich leicht erreichen, indem Sie die Ereignisbehandlungsroutinen shown.bs.modal und hidden.bs.modal einhaken und den Z-Index dort anpassen. 

Hier ist ein Arbeitsbeispiel

Ein bisschen mehr Info ist hier verfügbar.

Diese Lösung arbeitet 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'); 

    });        
});
75
Yermo Lamers

Etwas kürzere Version basiert auf dem Vorschlag von Yermo Lamers, dies scheint gut zu funktionieren. Auch bei grundlegenden Animationen wie Ein-/Ausblenden und sogar verrückter Batman-Zeitung drehen sich. 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');
});
21

Als ich die Antwort von A1rPun mit dem Vorschlag von StriplingWarrior kombinierte, fiel mir folgendes ein:

$(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 Modals, die nachträglich hinzugefügt werden, und entfernt das Problem der zweiten Bildlaufleiste. Das Wichtigste, für das ich dies nützlich fand, war die Integration von Formularen in Modalen mit Validierungsfeedback von Bootbox-Alarmen, da diese dynamische Modale verwenden und daher erfordern, dass Sie das Ereignis an das Dokument und nicht an .modal binden, da es nur an das Vorhandene angehängt wird Modale.

Fiddle hier.

19

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

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

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

Es wird auch das Problem mit aufeinanderfolgenden Modalen behandelt, wodurch der Hintergrund dunkler und dunkler wird. Dadurch wird sichergestellt, dass jeweils nur eine Kulisse sichtbar ist:

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

Der Z-Index des sichtbaren Hintergrunds wird für die Ereignisse show.bs.modal und hidden.bs.modal aktualisiert:

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

Beim Lösen von Stacking-Modalen wird beim Durchlaufen der Hauptseite ein Bildlauf durchgeführt Ich habe festgestellt, dass neuere Versionen von Bootstrap (mindestens seit Version 3.0.3) keinen zusätzlichen Code zum Stapeln von Modalen benötigen.

Sie können Ihrer Seite mehrere Modalitäten hinzufügen (natürlich mit einer anderen ID). Das einzige Problem, das beim Öffnen von mehr als einem Modal gefunden wird, ist das Entfernen der modal-open-Klasse für den Body-Selektor.

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

$('.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 erforderlich ist, können Sie data-backdrop="false" einstellen.

Version 3.1.1. fixed Modaler Hintergrund über der Bildlaufleiste des Modals korrigiert , aber die obige Lösung scheint auch mit früheren Versionen zu funktionieren.

9
Bass Jobsen

Endlich gelöst Ich habe es in vielerlei Hinsicht getestet und funktioniert gut.

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

VON:

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

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

that.enforceFocus()

TO:

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: Prüfen Sie, wie viele Modale geöffnet sind, und ändern Sie den Z-Index des Modals und des Hintergrunds auf einen höheren Wert.

Versuchen Sie, Folgendes zu Ihrem JS on bootply hinzuzufügen

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

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

Erklärung:

Nachdem ich mit den Attributen herumgespielt hatte (mit dem dev-Tool von Chrome), habe ich festgestellt, dass jeder z-index-Wert unterhalb von 1031 die Dinge hinter die Kulisse stellt. 

Durch die Verwendung der modalen Event-Handles von Bootstrap setze ich den z-index auf 1030. Wenn #myModal2 angezeigt wird, setzen Sie z-index wieder auf 1040, wenn #myModal2 ausgeblendet ist.

Demo

3
Timber

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

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');
2
nuEn

arbeiten Sie für das Öffnen/Schließen von Multimodalen 

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#

1
Ivan

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

1
Tony Schwartz

Jedem Modal sollte eine andere ID zugewiesen werden, und jeder Link sollte auf eine andere Modal-ID ausgerichtet sein. Es sollte also 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>
...
1
paulalexandru

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, wäre dies die beste Lösung. Wenn Sie keine Aktualisierung durchführen können, funktioniert die untenstehende Lösung immer noch und funktioniert im Wesentlichen wie Bootstrap 3.3.4 (Padding neu berechnen und anwenden).

Wie Bass Jobsen feststellte, haben neuere Versionen von Bootstrap den Z-Index gelöst. Die modal-offene Klasse und das Recht auf Polsterung waren noch immer Probleme für mich, aber diese von Yermo Lamers Lösung inspirierten Skripts lösen es. Legen Sie es einfach in Ihre JS-Datei und genießen Sie es.

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

Ich hatte ein ähnliches Szenario und nach ein wenig Forschung und Entwicklung fand ich eine Lösung. Obwohl ich in JS nicht großartig bin, habe ich es 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);

});
0
user3500842

Die anderen Lösungen haben für mich nicht funktioniert. Ich denke, vielleicht weil ich eine neuere Version von Bootstrap (3.3.2) verwende ... das Overlay erschien über dem modalen Dialog. 

Ich überarbeitete den Code ein wenig und kommentierte den Teil aus, der den modalen Hintergrund anpasste. Das Problem wurde 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.

0
ClearCloud8

Hier ist ein paar CSS mit nth-of-type Selektoren, 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

0
Zim

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

Sie haben dies festgestellt, indem Sie dem Body-Element in Chrome einen Unterbaumänderungs-Haltepunkt hinzugefügt und das Hinzufügen der modal-backdrop-divs verfolgt haben.

0
Amer Sawan

Wenn ein bestimmtes Modal über einem anderen offenen Modal angezeigt werden soll, fügen Sie den HTML-Code des obersten Modals nach dem anderen Modal div hinzu. .

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" ... />
0
reformed

Keine Skriptlösungen, die nur css verwenden, wenn Sie über zwei Modalagen verfügen, setzen Sie den 2. Modalmodus auf einen höheren z-Index

.second-modal { z-index: 1070 }

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

Manchmal kann eine Folge das Durcheinander verursachen! Schreiben Sie zuerst den ersten und dann den zweiten

0
John

Leider habe ich nicht den Ruf zu kommentieren, aber es sollte beachtet werden, dass die akzeptierte Lösung mit der hartcodierten Basislinie eines 1040-Z-Index der zIndex-Berechnung überlegen ist, die versucht, den maximalen gerenderten zIndex auf der Seite zu finden.

Es scheint, dass bestimmte Erweiterungen/Plugins auf DOM-Inhalten der obersten Ebene angewiesen sind, was die .Max-Berechnung zu einer so großen Anzahl macht, dass der zIndex nicht weiter erhöht werden kann. Dies führt zu einem Modal, bei dem die Überlagerung 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 habe nicht herausfinden können, aus welchem ​​Grund die verschiedenen Formen von Math.Max ​​für z-Index zu diesem Szenario führen, aber es kann vorkommen, dass es einigen Benutzern eindeutig erscheint. (Bei meinen allgemeinen Tests zum Browserstack funktionierte dieser Code einwandfrei).

Hoffe das hilft jemandem.

0
Vincent Polite

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

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

// Funktion innerhalb der Add-Variable 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
0
Arpit Pithadia
$(window).scroll(function(){
    if($('.modal.in').length && !$('body').hasClass('modal-open'))
    {
              $('body').addClass('modal-open');
    }

});
0
stara_wiedzma

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 zu der Stelle, an der ich sie gefunden habe: Bootply .__ Stellen Sie nur sicher, dass das .modual, das auf Top erscheinen muss, im HTML-Code die zweite ist, damit CSS es als "even" finden kann.

0
Guntar

Wenn Sie nach einer Bootstrap 4-Lösung suchen, ist die Verwendung von reinem CSS ganz einfach:

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

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 der obigen Tabelle.

0
Joery

Probieren Sie diese http://nakupanda.github.io/bootstrap3-dialog/#opening-multiple-dialogs

Es sollte Ihr Problem leicht lösen.

0
badboy

Update: 22.01.2019, 13.41 Ich habe die Lösung von jhay optimiert, die auch das Schließen und Öffnen derselben oder verschiedener Dialoge unterstützt, wenn zum Beispiel von einem Detail zu einem anderen vor oder zurück gesprungen 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));
0
Synthie