it-swarm.com.de

Bootstrap Modal sitzt hinter der Kulisse

Ich habe also fast das gleiche Problem wie @Jamescoo , aber ich denke, mein Problem kommt von der Tatsache, dass ich bereits einige DIVs positioniert habe, um eine verschiebbare Navigationsleiste zu erstellen.

Hier ist mein genaues Setup repliziert: http://jsfiddle.net/ZBQ8U/2/

BONUS: Fühlen Sie sich frei, den Code für die Schiebewand zu ergattern, wenn Sie möchten :)

Die Z-Indizes sollten nicht miteinander in Konflikt stehen und ihre Werte würden zeigen, dass sie korrekt stapeln, aber visuell nicht.

Sobald Sie auf die Schaltfläche "Open Modal" klicken, deckt der <div class="modal-backdrop fade in"></div> alles ab! (Sie müssen den Code erneut ausführen, um ihn zurückzusetzen.)

Ich weiß nicht genau, wie ich dieses Problem beheben kann ... Irgendwelche Ideen? 

49
WizzyBoom

Verschieben Sie einfach den gesamten Modal außerhalb des restlichen Codes nach ganz unten. Es muss nicht in einem anderen Element als dem Hauptteil verschachtelt sein.

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>

Demo

Sie weisen auf diese Lösung in der Dokumentation hin.

Modale Markup-Platzierung
Versuchen Sie immer, den HTML-Code eines Modals an einer obersten Position in Ihrem Dokument zu platzieren, um andere Komponenten zu vermeiden das Aussehen und/oder die Funktionalität des Modals beeinflussen.

102
Schmalzy

Obwohl der z-Index von .modal höher ist als der von .modal-backdrop, befindet sich .modal in einem übergeordneten div #content-wrap, der einen niedrigeren z-Index als .modal-backdrop hat (z-index: 1002 vs. z-index: 1030).

Da der übergeordnete z-Index einen niedrigeren z-Index hat als der .modal-backdrop, wird alles in ihm hinter dem Modal stehen, unabhängig von dem z-Index, der den untergeordneten Elementen gegeben wird.

Wenn Sie den z-index entfernen, den Sie sowohl für den body div#fullContainer #content-wrap als auch für den #ctrlNavPanel festgelegt haben, scheint alles in Ordnung zu sein.

body div#fullContainer #content-wrap {
  background: #ffffff;
  bottom: 0;
  box-shadow: -5px 0px 8px #000000;
  position: absolute;
  top: 0;
  width: 100%;
}

#ctrlNavPanel {
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  height: 100%;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 250px;
}

HINWEIS: Ich denke, dass Sie anfangs Z-Indizes für # content-wrap und #ctrlNavPanel verwendet haben, um sicherzustellen, dass das Navi hinten liegt, aber das ist nicht notwendig, da das nav-Element vor dem content-wrap im HTML-Code steht, also nur Sie müssen sie positionieren, nicht explizit eine Stapelreihenfolge festlegen.


EDIT Als Schmalzy aufnahm, sind die Links nicht mehr anklickbar. Dies liegt daran, dass der Vollcontainer 100% breit ist und somit die Navigation abdeckt. Der schnellste Weg, dies zu beheben, besteht darin, die Navigation innerhalb dieses Bereichs zu platzieren:

<div id="fullContainer">
  <aside id="ctrlNavPanel">
    <ul class="nav-link-list">
      <li><label>Menu</label></li>
      <li><a href="/"><span class="fa fa-lg fa-home"></span> Home</a></li>
      <li><a><span class="fa fa-lg fa-group"></span>About Us</a></li>
      <li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li>
    </ul>
  </aside>
  <div id="content-wrap">
    ...
  </div>
</div>

DEMO HIER

26
davidpauljunior

In meinem Fall könnte ich das Problem beheben, indem Sie css für den .modal-backdrop hinzufügen.

.modal-backdrop {
  z-index: -1;
}

Obwohl dies funktioniert, scheinen Formularsteuerelemente immer noch über dem Hintergrund zu erscheinen. Wenn Sie auf eine beliebige Stelle klicken, wird der Modal-Modus nicht angezeigt.

Eine bessere Problemumgehung ist für mich, an das angezeigte Ereignis zu binden (sobald die Seite geladen ist) und die z-index-Eigenschaft zu korrigieren.

$('.modal').on('shown.bs.modal', function() {
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

In diesem Fall, wenn Sie mit dem Ändern des DOM in der angezeigten Modalität zufrieden sind:

$('.modal').on('shown.bs.modal', function() {
  //Make sure the modal and backdrop are siblings (changes the DOM)
  $(this).before($('.modal-backdrop'));
  //Make sure the z-index is higher than the backdrop
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
19
jacoswarts

Keine der Antworten hat für mich gut genug funktioniert. Das Problem schien zu liegen, wo die modalen Fenster außerhalb des Körpers sein müssen. Und es ist nicht am besten

Also hat dieser Code die Aufgabe perfekt erledigt:

$('.modal ').insertAfter($('body'));
$('#product_' + product_id + ' .modal ').insertAfter($('body'));
12
user109764

In meinem Fall war einer der Eltern meines Modals animiert und hatte dies

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 100;
}

Der Blocker ist hier animation-fill-mode: both;. Ich konnte Modal nicht einfach nach außen verschieben, daher bestand die Lösung darin, den 'animation-fill-mode' auf animation-fill-mode: none; zu überschreiben. Animation funktionierte immer noch gut.

5
Eugene Shytik

Ich habe einige Tage mit demselben Problem gekämpft ... Ich habe drei mögliche Lösungen gefunden, aber ich weiß nicht, welches das Optimum ist.

die Änderungen werden in bootstrap.css sein

Option 1: 

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040; <- DELETE THIS LINE
  background-color: #000000;
}

Option 2:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; <- MODIFY THIS VALUE BY -1
  background-color: #000000;
}

Option 3:

/*ADD THIS*/
.modal-backdrop.fade.in {
    z-index: -1;
}

Ich habe die Option 2 verwendet.

4
Lrodriguez84

Entfernen Sie den Hintergrund, wenn Sie ihn nicht wirklich benötigen (data-backdrop = "false"):

<div class="modal fade" data-backdrop="false" role="dialog" id="my-modal" aria-labelledby="modal-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-title">No Backdrop</h3>
                </div>
                <div class="modal-body">
                    <p>
                        Look! No backdrop here!
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary">Ok</button>                    </div>
            </div>
        </div>
    </div>
3
Carlos Magno

Sie könnten dies verwenden: 

<div
  class="modal fade stick-up disable-scroll"
  id="filtersModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="filtersModal"
  aria-hidden="false"
  style="background-color: rgba(0, 0, 0, 0.5);" data-backdrop="false"
>
....
</div>

Adding style="" and data-backdrop false would fix it.
1
Rishab Narang

Für diejenigen, die ASP.NET MVC verwenden,

Sie müssen das modale div unmittelbar vor dem </body>-Tag verschieben, kann es aber nicht, weil Sie eine Layout - Seite verwenden

Definieren Sie einen Abschnitt in Ihrer _Layout.cshtml-Datei direkt vor dem body-Tag, zB:

... some html in layout page ...
@RenderSection("bottomHTML", required: false)
</body>
</html>

Dann aus deiner Sicht

@section bottomHTML 
{
<div class="modal fade" id="myModalID" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
... rest of the modal div HTML ...
}

Auf diese Weise wird das modale HTML vor dem body-Tag gerendert und das modale sollte nun korrekt angezeigt werden.

1
Kemal Emin

Eine andere Lösung für dieses Problem ist das Hinzufügen von z-index: 0; zur .modal-backdrop-Klasse in Ihrer Datei "bootstrap-dialog.css", wenn Sie "bootstrap.css" nicht ändern möchten.

1
Mihaela Rada

wenn wir den Hintergrund nicht löschen können und/oder wir ein Komponentengerüst wie Winkel oder Werte haben, können wir nicht modal zur Wurzel verschieben. Ich habe diesen Trick gemacht: Setze meinen benutzerdefinierten Modal-Hintergrund-Container (mit Zusatzklasse) als Geschwister für Modal-Dialog-Container und füge ein paar CSS hinzu

<div bsModal #moneyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
    <!-- magic container-->
    <div class="modal-holder modal-backdrop" (click)="moneyModal.hide()"></div>
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                ....
            </div>
        </div>
    </div>
</div>

und css

.modal-backdrop{z-index: -1}// or you can disable modal-backdrop
.modal-holder.modal-backdrop{z-index: 100}
.modal-holder + .modal-dialog {z-index: 1000}
1
dimson d

Wenn Sie den Modal nicht an die Wurzel setzen können (wenn Sie beispielsweise "angle" verwenden und sich der Modal beispielsweise in einem Controller befindet), ist modifying bootstrap oder die Verwendung von js offensichtlich eine bad - Lösung.

sie sagen also, Sie haben Ihre Website-Struktur:

//not working
<div>
    <div>
        <div>
            <modal></modal>
        </div>
    </div>
</div>

Öffnen Sie Ihren Code-Inspector und verschieben Sie das Modal in das Stammverzeichnis. Es sollte funktionieren (aber nicht wo Sie wollen):

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
</div>
<modal></modal>

setzen Sie es nun in das erste div und prüfen Sie, ob es funktioniert: Wenn ja, überprüfen Sie das nächste Kind, bis es nicht funktioniert und suchen Sie das div, das das Problem darstellt.

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
    <modal></modal>
</div>

Sobald Sie wissen, welches Div das Problem ist, können Sie mit der CSS-Anzeige und der Position spielen, damit es funktioniert.

jeder hat eine andere Struktur, aber in meinem Fall war es die Lösung, ein Elternteil auf display: table; zu setzen

0
Sebastien Horin

Oft können Sie das Modal nicht nach außen verschieben, da dies Ihre Entwurfsstruktur beeinflusst.

Der Grund, warum die Kulisse über Ihrem Modal steht, ist id, dass das übergeordnete Element über eine beliebige Position verfügt. 

Eine sehr einfache Möglichkeit, das Problem zu lösen, ist das Verschieben der Modalität nach außen, wenn Sie die Modalität nach außen verschieben. In Ihrem Fall könnte es sein

$(".modal-backdrop").appendTo("main");

Beachten Sie, dass diese Lösung anwendbar ist, wenn Sie über eine bestimmte Struktur für Ihre Anwendung verfügen und Sie den Modal nicht einfach nach außen verschieben können, da dies gegen die Entwurfsstruktur geht

0
prajnavantha

Fügen Sie diesen Code an einem beliebigen Ort ein

$('.modal').on('shown.bs.modal', function () {
    var max_index = null;
    $('.modal.fade.in').not($(this)).each(function (index , value){
        if(max_index< parseInt( $(this).css("z-index")))
            max_index = parseInt( $(this).css("z-index"));
    });
    if (max_index != null) $(this).css("z-index", max_index + 1);
});
0

Ich hatte ein ähnliches Problem, dass die Überblendung nicht funktionierte und das Overlay auf der Seite blieb. Ich hatte dynamischen Inhalt wieder auf der Seite (Aktualisierung einiger Inhalte nur bei modaler Aktion). Ich hatte auch diesen $ ('#rejectModal -' + itemId) .modal ('hide') (itemId ist die dynamische ID für mehrere Modale auf einer einzigen Seite, um Informationen abzulehnen), aber das Problem war immer noch nicht behoben.

Die Überlagerung blieb erhalten, da mein Layout in der Teilansicht nicht auf Null gesetzt wurde. Nach der Einstellung war das Problem behoben:

@{ 
    Layout = null;
}
0
Dongolo Jeno

das funktioniert für mich.

<div class="modal fade" id="modalDecision" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <asp:Label runat="server" Height="30px">Please select recovery delivery option</asp:Label>
            <asp:LinkButton ID="btnEmail" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Email</asp:LinkButton>
            <asp:LinkButton ID="btnText" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Text</asp:LinkButton>
        </div>
    </div>
</div>

var element = $('#modalDecision');
    // also taken from bootstrap 3 docs
    $(element).on('shown.bs.modal', function (e) {
        // keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
        var backDrop = $("<div class='modal-backdrop' style='z-index:-1;opacity:.5'></div>");
        $(element).append($(backDrop));
    });
0
Jeff Brose

Vergewissern Sie sich zuerst, dass sich das Modal nicht in einem übergeordneten div befindet.

Es hat gut für mich funktioniert.

0

Mir fehlte die folgende html 

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

fügte hinzu und funktionierte ohne Probleme

0
ncubica

Wenn Sie JQuery verwenden, können Sie mit dem appendTo () das Modal an ein bestimmtes Element anhängen. In diesem Fall kann die einfache Zeile in den meisten Fällen Ihr Modal auf den Hintergrund verschieben, unabhängig davon, wo sich Ihr modaler Div befindet

$("#myModal").appendTo("body");

hier ist die Referenz der JQuery-Funktion appendTo: http://api.jquery.com/appendto/

Ich habe es auf Ihrer Geige aktualisiert http://jsfiddle.net/ZBQ8U/240/

0
Joe Lu

Ich habe festgestellt, dass die Anwendung eines ionischen Frameworks (ionic.main.css) nach dem Bootstrap dieses Problem für mich verursacht.

0

Da ich keine Möglichkeit habe, das modale Markup zu verschieben, da ich es in einer Teilvorlage innerhalb einer Bedingung hinzugefügt habe, was für mich funktionierte, ist CSS unten hinzugefügt

.modal.fade {
    display: none;
}

Dann, wenn boostrap add class "in" durch js display: block anwenden und alles funktioniert gut.

0
Maxi

bewegen Sie Ihr Modal einfach außerhalb des Div-Inhalts und platzieren Sie es meistens vor dem Schließen des Körpers.

0
Bhushan Pawar

ich habe dieses Problem entdeckt und nachdem ich meine CSS untersucht hatte, hatte der Hauptcontainer (direktes Kind des Körpers) 

position: relative
z-index: 1

die Kulisse funktionierte gut, nachdem ich diese beiden Eigenschaften entfernt hatte. Dieses Problem kann auch auftreten, wenn der Hauptwickler einen position: fixed hat.

0
Hassan ALAMI

einfach z-index: 1040 entfernen; 

aus dieser Datei bootstrap.css Klasse .modal-backdrop

0
user301153

Zusätzlich zu allen Antworten hier habe ich herausgefunden, dass die Bootstrap4 "animated fadeIn" auch diesen Fehler verursacht (nicht hinter dem modifizierbaren Hintergrund):

prüfen Sie, ob sich Ihr Modal im folgenden übergeordneten Tag befindet (Bootstrap-Animation).

<div class="animated fadeIn"></div>

Ich habe diesen Tag entfernt - das Problem für mich gelöst.

0

Ich schütze mich davor, den modalen Inhalt außerhalb seines ursprünglichen Kontextes zu verschieben: Andere JS oder Stile könnten von diesem Kontext abhängen.

Ich bezweifle jedoch, dass es Skripte oder Stile gibt, die einen bestimmten Kontext für den Hintergrund erfordern. 

Meine Lösung besteht also darin, den Hintergrund neben dem modalen Inhalt zu verschieben und ihn in den gleichen Stapelkontext zu bringen:

$(document).on('shown.bs.modal', '.modal', function () {
    $('.modal-backdrop').before($(this));
});

Es ist nur eine leichte Abweichung von jacoswarts ' Lösung , also danke für die Inspiration!

0
mac9416