Überlagerung mehrerer Modalitäten

185

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

Modal Overlay dahinter

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.

Willian Bonho Daiprai
quelle

Antworten:

427

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

A1rPun
quelle
1
@ A1rPun funktioniert nicht für mich .. wenn ich das zweite Modal schließe .. der Körper wird scrollbar .. ich habe Ihren gesamten Code verwendet .. :(
Vishal
Nicht in meiner Umgebung mit neuesten bs gearbeitet. Ich musste tun: $ ('. Modal-background'). Last (). Not ('. Modal-stack'). CSS ('z-index', zIndex - 1) .addClass ('modal-stack') ;;
Metamagikum
2
Ich musste eine kleine Änderung vornehmen ( .not(this)in der zweiten Zeile hinzugefügt ), damit es mit Bootstrap Datepicker funktioniert var zIndex = 1040 + (10 * $('.modal:visible').not(this).length);
Benrwb
Wenn zwei Modalitäten vorhanden sind, wird die erste entfernt und eine dritte hinzugefügt. Die dritte hat den gleichen Z-Index wie die zweite, da beide eine Länge von 2 verwendet haben. Ich musste den zuletzt verwendeten Z-Index über die Modalitäten.
Murphybro2
3
Funktioniert gut mit BS4 spätestens
Wobsoriano
85

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

    });        
});
Yermo Lamers
quelle
3
Cool, aber wenn ein Modal geschlossen ist, werden zwei Bildlaufleisten angezeigt - eine für Modal und eine für die ganze Seite. Kann das gelöst werden?
Somnium
Verwenden Sie den neuesten Bootstrap?
Yermo Lamers
3
Um mit der zusätzlichen Scoll-Leiste beim Schließen fertig zu werden, müssen Sie dem Körper im Listener hidden.bs.modal die Klasse "modal-open" hinzufügen.
Lee
5
Ein Problem, auf das ich stieß, war, als das erste Modal angezeigt wurde und eine Bildlaufleiste benötigte. Wenn ich ein zweites Modal zeigte, entfernte es die Bildlaufleiste des ersten Modals und ich blieb mit einem abgeschnittenen Modal hängen. Um dies zu lösen, habe ich dies meinem CSS hinzugefügt. .Modal {overflow-y: auto; }
ScubaSteve
2
Ich denke, dies sollte die akzeptierte Antwort sein. Funktioniert einwandfrei für mich.
Matthew Goheen
24

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');
});
Ketwaroo D. Yaasir
quelle
7
Ein Problem, das hier bleibt, ist, dass wenn Sie das zweite Modal schließen und Ihre Seite genug Text hat, um die Browsergröße zu überschreiten, Sie ein seltsames Verhalten der Bildlaufleiste haben. Sie müssen auch die modal-openKlasse auf dem body-Element wiederherstellen : jsfiddle.net/vkyjocyn
StriplingWarrior
22

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.

Sieben tödliche Sünden
quelle
2
Darf ich vorschlagen, den maximalen Z-Index der offenen Modale zu verwenden, um den Basis-Z-Index anstelle des fest codierten Werts von 1040 zu bestimmen? stackoverflow.com/a/5680815/2569159
harco gijsbers
12

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));
jhay
quelle
Schöne Lösung. Ich erwarte, dass der Hintergrund dunkler wird, wenn Sie mehrere Modalitäten haben, aber ich kann sehen, warum Sie es nicht wollen würden. @AndyBurton Kannst du mich bitte wissen lassen, was meine Lösung fehlt?
A1rPun
@ A1rPun Beim Öffnen und Schließen des 2. Modals wurden die Bildlaufleisten entfernt, die das Scrollen im 1. Modal ermöglichten. IIRC schien dies zu sein, weil die Klasse am Körper entfernt wurde, als das 2. Modal geschlossen wurde.
Andy Burton
@AndyBurton Ich kümmere mich auch um die Lösung dieses Problems.
A1rPun
10

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.

Bass Jobsen
quelle
8

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.

Willian Bonho Daiprai
quelle
5

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);
}
michal.jakubeczy
quelle
Das scheint gut zu funktionieren ... würden Sie denken, dass dies Standard-Bootstrap ist?
Ben in CA
3

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

Bauholz
quelle
2

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

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

Tony Schwartz
quelle
2

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; 
}
Liran Barniv
quelle
2

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" ... />
reformiert
quelle
2

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', '');
});
Dexcell
quelle
Hat perfekt für mich
Captain Squirrel
1

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>
...
paulalexandru
quelle
1

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

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.

Guntar
quelle
1

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#

Ivan
quelle
0

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

Zim
quelle
1
Ok, das ist großartig, aber ich habe ein drittes Modal eingesetzt und es funktioniert nicht. Ich habe einige Skripte, die es generieren (wie Warnungen, Suchfelder usw.) und ich kann 3 geöffnete Modalitäten gleichzeitig haben (bis ich weiß). Ich bin nicht gut mit CSS, tut mir leid, wenn ich etwas verliere. Es gibt den Code: bootply.com/86975
Willian Bonho Daiprai
0

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

});
user3500842
quelle
0

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
Arpit Pithadia
quelle
0

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.

ClearCloud8
quelle
0

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.

Vincent höflich
quelle
0

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.

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

});
stara_wiedzma
quelle
Nur-Code-Antworten sind oft nicht hilfreich, um darauf hinzuweisen, warum das Problem aufgetreten ist. Sie sollten eine Erklärung hinzufügen, warum das Problem dadurch gelöst wird. Bitte lesen Sie Wie schreibe ich eine gute Antwort?
FluffyKitten
0

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));
Synthie
quelle
0

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.

Joery
quelle
0

Ü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');
Alper AKPINAR
quelle