it-swarm.com.de

Bootstrap modaler Z-Index

Das Problem ist: Ich verwende Parrallx-Scrolling, also habe ich Z-Index auf der Seitenow, wenn ich versuche, ein Box-Modal von Bootstrap zu öffnen, bekomme ich ihn so https: // www. dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png

Wie Sie sehen können, ist das Box-Modal nicht oben und jeder Mausklick deaktiviert es ... wenn ich diesen CSS-Code deaktiviere:

#content {
    color: #003bb3;
    position: relative;
    margin: 0 auto;
    width: 960px;
    z-index: 300;
    background: url('../images/parallax-philosophy-ltl.png') top center;
}

die Box-Modal-Funktion funktioniert nur .. Die Bootstrap-Standardeinstellung .modal ist z-index: 1050. Ich kann also nicht verstehen, warum sie nicht auf allen anderen Kontexten steht.

das ist das Box-Modal:

   <section id="launch" class="modal hide fade">
    <header class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>אשר הגעה לחתונה  </h3>
    </header>
    <div class="modal-body">
        <form method="post" action="/update" id="myForm2">
            <input type="radio"  id="yes_arrive" name="arrive" checked="checked" value="yes">מגיע<br>
            <p><input type="text" required name="fsname" value="" placeholder="הכנס שם פרטי ומשפחה "></p>
            <p>כמה אנשים מגיעים?   </p>
            <select name="number" id="number">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>

            </select>
            <hr/>
            <input type="hidden" name="title" id="title" value="{{title}}">
            <input type="radio" name="arrive" id ="no_arrive" value="no">לא מגיע
            <p>סיבה לאי הגעה</p>
            <input type="text" name="no_arrive_reason" placeholder="קצר ולעניין, לא שדה חובה">
            <hr/>
            <p class="submit"><input type="submit" name="submit" value="שלח"></p>

        </form>
    </div>
    <footer class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">Close</button>
    </footer>
</section>

und ich löse ihn aus dem oberen Menü aus:

  <li><a class="launch" data-toggle="modal" href="#launch">Approve</a></li>

danke voraus.

BEARBEITEN

Lösung gefunden, wenn jemand auf dasselbe Problem stößt . Dies ist der Weg: Fügen Sie dem Abschnitt oder dem Div, in dem Sie den Modal enthalten, data-backdrop = "false" hinzuEg: <section id="launch" class="modal hide fade in" data-backdrop="false"> Wenn der graue Hintergrund auf diese Weise angezeigt wird, ist er irgendwie eine schmutzige Lösung. Er freut sich, von einer besseren zu hören.

24

Das Problem hat fast immer etwas mit "verschachtelten" Z-Indizes zu tun. Als Beispiel:

<div style="z-index:1">
  some content A
  <div style="z-index:1000000000">
    some content B
  </div>
</div>
<div style="z-index:10">
  Some content C
</div>

wenn Sie sich nur den Z-Index anschauen, würden Sie B, C, A erwarten. Da B jedoch in einem Div verschachtelt ist, das ausdrücklich auf 1 gesetzt ist, wird es als C, B, A angezeigt.

Einstellungsposition: Fixed fixiert den Z-Index für dieses Element und alle seine untergeordneten Elemente. Daher kann das Problem durch eine Änderung gelöst werden.

Die Lösung besteht darin, das übergeordnete Element zu finden, für das der Z-Index festgelegt ist, und entweder die Einstellung anzupassen oder den Inhalt so zu verschieben, dass die Layer und ihre übergeordneten Container so angeordnet werden, wie Sie es möchten. Firebug in Firefox hat ganz rechts einen Tab namens "Layout", und Sie können schnell die übergeordneten Elemente aufrufen und sehen, wo der Z-Index festgelegt ist.

26
Jon

Ich fand diese Frage, da ich ein ähnliches Problem hatte. Während data-backdrop das Problem "löst"; Ich habe ein anderes Problem in meinem Markup gefunden.

Ich hatte die Schaltfläche, mit der dieses modale und gestartet wurde. Der modale Dialog selbst befand sich in der Fußzeile. Das Problem ist, dass die Fußzeile als navbar_fixed_bottom definiert wurde und diese position:fixed enthielt. 

Nachdem ich den Dialog außerhalb des festen Abschnitts verschoben hatte, funktionierte alles wie erwartet.

15
Sam Ruby

Der modale Dialog kann durch Überschreiben seiner Z-Index-Eigenschaft oben positioniert werden:

.modal.fade {
  z-index: 10000000 !important;
}
7
Martin Staufcik

Nun, obwohl dieser Eintrag sehr alt ist. Ich habe diese Woche mit bootstrap's modal gearbeitet und kam dieses "Problem" mit .. Meine Lösung war irgendwie eine Mischung aus allem.

Überprüfen Sie zuerst den Z-Index-Krieg, um eine Lösung zu erhalten!

Das first -Ding, das Sie tun können, ist das Deaktivieren des modalen Hintergrunds. Ich hatte vorher den Stackoverflow-Posting, aber ich habe ihn verloren. aber es geht im HTML-Code so:

<!-- from the bootstrap's docs -->
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">
  <!-- mind the data-backdrop="false" -->
  <div class="modal-dialog" role="document">
    <!-- ... modal content -->
  </div>
</div>

Der second -Ansatz bestand darin, einen Ereignis-Listener an das angezeigte modale Ereignis des Bootstraps anzuhängen. Das ist irgendwie nicht so hübsch, wie Sie vielleicht denken, aber vielleicht mit ein paar eigenen Tricks kann es funktionieren. Dies hat den Vorteil, dass das Element den Ereignis-Listener anfügt und Sie es vollständig vergessen können, solange Sie den Ereignis-Listener angeschlossen haben :)

var element = $('selector-to-your-modal');

// 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 = $('.modal-backdrop');
  $(element).append($(backDrop));
});

Der second.1-Ansatz ist grundsätzlich derselbe wie der vorherige, jedoch ohne den Ereignis-Listener.

Hoffe es hilft jemandem!

Ich hatte auch dieses Problem . Das Problem kommt von html, erstellt von bootstrap js:

<div class="modal-backdrop fade in"></div>

Diese Zeile wird direkt vor dem Ende des <body>-Elements erstellt. Dies verursacht ein "z-index gestapeltes Elementproblem". Ich glaube, dass Bootstrap .js die Erstellung dieses Elements falsch machen. Wenn Sie eine mvc-Layoutseite haben, verursacht dieses Skript immer noch das gleiche Problem. Beter js Idee geschnitten sein, um modale Ziel-ID zu bekommen und diese Zeile in HTML zu injizieren, bevor ...

this.$backdrop = $(document.createElement('div'))
    .addClass('modal-backdrop ' + animate)
    .appendTo(this.$body)

SO SOLUTION IS reparatur bootstrap.js - Teil des Modals:

.appendTo(this.$body)  
//REPLACE TO THIS:
 .insertBefore(this.$element) 
1
Miroslav Siska

Versuchen Sie dieses Skript:

function addclassName(){
setTimeout(function(){
            var c = document.querySelectorAll(".modal-backdrop");
            for (var i = 0; i < c.length; i++) {
                c[i].style.zIndex =  1040 + i * 20  ;
            }
            var d = document.querySelectorAll(".modal.fade");
            for(var i = 0; i<d.length; i++){
                d[i].style.zIndex = 1050 + i * 20;
            }
}, 10);

}

0
kunal singh

Ich habe mich mit dem JQLayout-Plugin darauf eingelassen, vor allem wenn Sie verschachtelte Layouts und Modale mit Bootstrap 4 verwenden.

Ein überschreibendes CSS muss hinzugefügt werden, um das Verhalten zu korrigieren.

.pane-center{
    z-index:inherit !important;
}
0
Marc Magon

ok, wenn Sie also bootstrap-rtl.css verwenden, gehen Sie zur folgenden Klasse .modal-backdrop und entfernen das z-index -Attribut danach sollte alles in ordnung sein

0
Mohammed Nafie