web-dev-qa-db-fra.com

Bootstrap modal z-index

Le problème est le suivant: j'utilise le défilement parrallx, j'ai donc z-index dans la page Maintenant, quand j'essaie de faire apparaître une boîte-modale par Bootstrap, je le fais ressembler à ceci https: // www. dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png

Comme vous pouvez le constater, le modal box n'est pas au top et n'importe quel clic de souris le désactive . Si je désactive ce code CSS:

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

la boîte modale fonctionne ... juste pour remarquer que .modal par défaut de Bootstrap est z-index: 1050, donc je ne comprends pas pourquoi ce n'est pas au-dessus de tout autre contexte.

c'est la boîte modale:

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

et je le déclenche depuis le menu du haut:

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

merci d'avance.

MODIFIER

Solution trouvée si quelqu'un tombe avec le même problème ... c'est le chemin: ajoutez data-backdrop = "false" à la section ou au div qui contient le modal aveceg: <section id="launch" class="modal hide fade in" data-backdrop="false"> Notez qu'il ne le fait pas Si vous obtenez le fond gris de cette façon, c’est donc une solution un peu sale, vous serez heureux d’entendre parler d’une meilleure solution.

javascriptjqueryhtmlcsstwitter-bootstrap
24
Dagan Bog-Computers

Le problème a presque toujours quelque chose à voir avec les index z "imbriqués". Par exemple:

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

si vous regardez uniquement l'indice z, vous vous attendez à B, C, A, mais comme B est imbriqué dans un div qui est expressément défini sur 1, il apparaîtra comme C, B, A.

Position de réglage: fixed verrouille l'index z pour cet élément et tous ses enfants, c'est pourquoi le fait de changer cela peut résoudre le problème.

La solution consiste à rechercher l'élément parent qui a le z-index défini et à ajuster le paramètre ou à déplacer le contenu afin que les calques et leurs conteneurs parents s'empilent comme vous le souhaitez. Firebug dans Firefox a un onglet à l'extrême droite nommé "Layout" et vous pouvez rapidement remonter les éléments parents et voir où le z-index est défini.

26
Jon

J'ai trouvé cette question car j'avais un problème similaire. Alors que data-backdrop "résout" le problème; J'ai trouvé un autre problème dans mon balisage.

J'ai eu le bouton qui a lancé ce modal et le dialogue modal lui-même était dans le pied de page. Le problème est que le pied de page a été défini en tant que navbar_fixed_bottom et qu'il contenait position:fixed. 

Après avoir déplacé le dialogue en dehors de la section fixe, tout a fonctionné comme prévu.

15
Sam Ruby

La boîte de dialogue modale peut être positionnée au-dessus en remplaçant sa propriété z-index:

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

Bien que cette entrée soit très ancienne. J'utilisais le modal de bootstrap cette semaine et je suis tombé sur ce "problème" . Ma solution consistait en quelque sorte à mélanger tout ce que je voulais, le poster car cela pourrait aider quelqu'un :)

_ {Commencez par vérifier la guerre de l'index Z pour trouver une solution!

La première chose que vous pouvez faire est de désactiver le fond modal. J’avais déjà posté le message Stackoverflow, mais je l’ai perdu; mais ça se passe comme ça dans le code HTML:

<!-- 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>

L'approche seconde consistait à associer un écouteur d'événement à l'événement modal présenté par le bootstrap. Ce n'est en quelque sorte pas aussi joli que vous ne le croyez, mais peut-être que, avec quelques astuces, vous fonctionnerez. L'avantage de ceci est que l'élément attache l'écouteur d'événement et vous pouvez complètement l'oublier à condition que l'écouteur d'événement soit attaché :)

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

L'approche second.1 est fondamentalement la même que la précédente, mais sans l'écouteur d'événements.

J'espère que ça aide quelqu'un!

3
Arnulfo Solis Ramirez

J'ai eu ce problème aussi . Le problème vient du HTML, créé par bootstrap js:

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

Cette ligne est créée directement avant la fin de l'élément <body>. Cette cause "problème d'élément empilé d'index z-index". Je crois que bootstrap .js fait la création de cet élément faux. Si vous avez dans la page de mise en page mvc, ce script causera toujours le même problème. Beter js a peut-être l’idée d’obtenir l’id modal cible et d’injecter cette ligne au format HTML avant ...

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

SO SOLUTION IS répare bootstrap.js - partie de modal:

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

Essayez ce script:

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

Je suis tombé dans cette situation en utilisant le plugin JQLayout, en particulier lors de l’utilisation de layouts et de modaux imbriqués avec Bootstrap 4.

Un CSS supplantant doit être ajouté pour corriger le comportement,

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

ok, donc si vous utilisez bootstrap-rtl.css, vous pouvez vous rendre dans la classe .modal-backdrop .__ et supprimer le z-index attribut . après que tout devrait aller bien

0
Mohammed Nafie