javascript - problema - modal-backdrop fade in not removed

Bootstrap modal z-index

Question

El problema es: estoy usando el desplazamiento de parrallx, así que tengo un índice z en la página ahora, cuando intento abrir una caja-modal por Bootstrap, hago que se vea así https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png

Como puede ver, el cuadro-modal no está en la parte superior y cualquier clic del mouse lo deshabilita. Si deshabilito este código css:

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

La caja modal funciona. Solo para darnos cuenta, el valor predeterminado de Bootstrap .modal es z-index: 1050, así que no puedo entender por qué no está encima de todos los demás contextos.

ese es el cuadro-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>

y lo disparo desde el menú superior:

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

gracias por delante

EDITAR

Solución encontrada si alguien cae al mismo problema. esta es la forma: agregue data-background = "false" a la sección o div que contiene el modal, por ejemplo: <section id="launch" class="modal hide fade in" data-backdrop="false"> note que no tiene el fondo gris de esa manera, por lo que es una solución sucia, estaré feliz de escuchar una mejor.

Answer 1

Bueno, a pesar de que esta entrada es muy antigua. Estuve usando el modal de bootstrap esta semana y surgió este "problema". Mi solución fue de alguna manera una mezcla de todo, solo publicándola ya que puede ayudar a alguien :)

¡Primero revisa la guerra del índice Z para obtener una solución allí!

Lo primero que puedes hacer es desactivar el telón de fondo modal, tuve el post Stackoverflow antes, pero lo perdí, así que no me tomo el crédito, tenlo en cuenta; Pero va así en el código HTML:

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

El segundo enfoque fue tener un detector de eventos adjunto al evento modal mostrado de bootstrap. Esto de alguna manera no es tan bonito como puedes pensar, pero quizás con algunos trucos por tu cuenta pueda funcionar de alguna manera. La ventaja de esto es que el elemento adjunta el detector de eventos y puedes olvidarlo por completo siempre que tengas conectado el detector de eventos :)

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

El segundo enfoque es básicamente el mismo que el anterior pero sin el detector de eventos.

Espero que ayude a alguien!

Answer 2

Descubrí esto con el uso del complemento JQLayout, especialmente cuando utilizo diseños y modos anidados con Bootstrap 4.

Es necesario agregar un css de reemplazo para corregir el comportamiento,

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

Answer 3

El diálogo modal se puede colocar en la parte superior anulando su propiedad z-index:

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

Answer 4

El problema casi siempre tiene algo que ver con los índices z "anidados". Como ejemplo:

<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 observa el índice z, solo esperaría B, C, A, pero como B está anidado en un div que se establece expresamente en 1, se mostrará como C, B, A.

Posición de ajuste: fijo bloquea el índice z para ese elemento y todos sus elementos secundarios, por lo que cambiarlo puede resolver el problema.

La solución es encontrar el elemento primario que tiene el índice z establecido y ajustar la configuración o mover el contenido para que las capas y sus contenedores primarios se apilen como usted quiere. Firebug en Firefox tiene una pestaña en el extremo derecho llamado "Diseño" y puedes subir rápidamente a los elementos principales y ver dónde se establece el índice z.

Answer 5

Encontré esta pregunta porque tenía un problema similar. Mientras data-backdrop "resuelve" el problema; Encontré otro problema en mi marca.

Tenía el botón que lanzó este modal y el diálogo modal en sí estaba en el pie de página. El problema es que el pie de página se definió como navbar_fixed_bottom , y esa position:fixed contenida position:fixed .

Después de mover el diálogo fuera de la sección fija, todo funcionó como se esperaba.

Answer 6

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

}

Answer 7

Yo tuve este problema también. El problema viene de html, creado por bootstrap js:

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

Esta línea se crea directamente antes del final del elemento <body> . Esto causa "problema del elemento apilado índice z". Creo que bootstrap .js hace mal la creación de este elemento. Si tiene en la página de diseño de mvc, esta secuencia de comandos todavía causará el mismo problema. Beter js idea cut be para obtener el ID modal de destino e inyectar esta línea a html antes de ...

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

SO SOLUTION IS repair bootstrap.js - parte de modal:

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

Answer 8

ok, así que si está usando bootstrap-rtl.css, lo que puede hacer es ir a la siguiente clase .modal-backdrop y eliminar el atributo z-index . después de eso todo debería estar bien