Bootstrap modal que aparece bajo fondo

El problema tiene que ver con el posicionamiento de los contenedores padre. Puede "mover" fácilmente su modal desde estos contenedores antes de mostrarlo. Aquí está cómo hacerlo si usted estaba showing su modal usando js:

$('#myModal').appendTo("body").modal('show');

O, si inicia modal usando botones, suelte el .modal('show'); y simplemente haga:

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

Esto mantendrá toda la funcionalidad normal, permitiéndole mostrar el modal usando un botón.

Probé todas las opciones suministradas anteriormente, pero no logré que funcionara con ellas.

Lo que funcionó: establecer el índice z de la .modal-telón de fondo a -1.

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

También, asegúrese de que la versión de BootStrap css y js son los mismos. Diferentes versiones también pueden hacer que modal aparezca en segundo plano:

Por ejemplo:

Malo:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Bueno:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

También me he encontrado con este problema y ninguna de las soluciones funcionó para mí hasta que me di cuenta de que en realidad no necesito un telón de fondo. Puede eliminar fácilmente el telón de fondo con el siguiente código.

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Nota : el atributo data-backdrop debe establecerse en false (otras opciones: static o true).

Conseguí que funcionara dando un alto valor de z-index a la ventana modal DESPUÉS DE abrirla. Por ejemplo:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

La solución proporcionada por @Muhd es la mejor manera de hacerlo. Pero si está atascado en una situación en la que cambiar la estructura de la página no es una opción, use este truco:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </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>

El truco aquí es data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" eliminando el telón de fondo predeterminado y creando uno ficticio configurando el color de fondo del diálogo en sí con algún alfa.

Actualización 1: Como señaló @Gustyn, hacer clic en el fondo no cierra el diálogo como se espera. Así que lograr que usted tiene que añadir un poco de código de Java script. Aquí hay un ejemplo de cómo se puede lograr esto.

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

A pero tarde en esto, pero aquí hay una solución genérica -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

Visite este enlace - Bootstrap 3 - desaparición modal debajo del telón de fondo cuando se utiliza una barra lateral fija para obtener más detalles.

Otra forma de abordar esto es eliminar el z-index de .modal-backdrop en bootstrap.css. Esto hará que el telón de fondo para estar en el mismo nivel que el resto de su cuerpo (todavía se desvanecen) y su modal para estar en la parte superior.

.modal-backdrop se ve así

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

Simplemente agregue dos líneas de CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

El.modal-backdrop debe tener un valor de 1050 para configurarlo sobre la barra de navegación.

Simplemente he establecido:

#myModal {
    z-index: 1500;
}

Y funciona....

Para la pregunta original:

.my-module {
    z-index: 1500;
}

Este problema a menudo se puede experimentar cuando se usan cosas como degradados en CSS para cosas como fondos o incluso encabezados de acordeón.

Desafortunadamente, modificar o anular core Bootstrap CSS es indeseable, y puede llevar a efectos secundarios no deseados. El enfoque menos intrusivo es agregar data-backdrop="false", pero puede notar que el efecto de desvanecimiento ya no funciona como se esperaba.

Después de seguir las versiones recientes de Bootstrap, la versión 3.3.5 parece resolver este problema sin lado no deseado effects.

Descargar: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

Asegúrese de incluir los archivos CSS y JavaScript de la versión 3.3.5.

Hola tuve el mismo problema, entonces me doy cuenta de que cuando usas bootsrap 3.1 A diferencia de las versiones anteriores de bootsrap (2.3.2) la estructura html del modal ha cambiado!

Debe envolver el cuerpo del encabezado modal y el pie de página con modal-dialog y modal-content

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

Tuve este problema y la forma más fácil de solucionarlo fue agregar z-index mayor que 1040 en el div modal-dialog:

<div class="modal-dialog" style="z-index: 1100;">

Creo que bootstrap crea un div modal-backdrop fade en el que en mi caso tiene el z-index 1040, así que si pones el modal-dialog encima de esto, ya no debería estar gris.

Usa esto en tu modal:

data-backdrop="false" 

Ninguna de las soluciones sugeridas anteriormente funcionó para mí, pero esta técnica resolvió el problema:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
}); 

Establece el índice z.modal a un valor más alto

Por ejemplo, .sidebarwrapper tiene z-index de 1100, por lo que establece el z-index de .modal a 1101

.modal {
    z-index: 1101;
}

Tengo una solución más ligera y mejor..

Se podría resolver fácilmente a través de algunos estilos CSS adicionales..

1. Ocultar la clase .modal-backdrop (generada automáticamente desde Bootstrap.js)

   .modal-backdrop
   {
   display:none;
   visibility:hidden; 
   position:relative
   }
   

2. Establezca el fondo de .modal en una imagen de fondo negro translúcido.

   .modal
   {
   background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
   // translucent image from google images 
   z-index:1100; 
   }
   

Esto funcionará mejor si tiene un requisito que necesita que el modal esté dentro de un elemento y no cerca de la etiqueta </body>..

En mi caso resolverlo, añadir esto en mi hoja de estilo:

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

Con Google debugger, puede examinar El TELÓN DE FONDO Del elemento Y modificar los atributos. Goog luck.

En la barra de navegación navbar-fixed-top necesita z-index = 1041 y también si u usa bootstarp-combined.min.css el también cambia .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Cambie la posición absoluta a relativa.

.modal-backdrop {
    position: relative;
    /* ... */
}

También puede eliminar el z-index de .modal-telón de fondo. El css resultante se vería así.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

Lo que encuentro es que:

En bootstrap 3.3.0 no está bien,pero cuando está en bootstrap 3.3.5 está bien.veamos el código. 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

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

$('.modal').insertAfter($('body'));

Esto cubriría todos los modales sin estropear ninguna de las animaciones o el comportamiento esperado..

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});

En mi caso, tenía un envoltorio con lo siguiente:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

Solo eliminó el z-index:1 y no tiene idea de por qué solucionó el problema. también con seguridad la eliminación de la posición relativa hizo, pero lo necesitaba.

En mi caso, la causa fue boostrap.min.css:) una vez que lo excluí de mi archivo html como referencia, el diálogo se mostró en forn del tono modal:)

Eliminé el telón de fondo modal.

.modal-backdrop {
    display:none;
}

Esta no es la mejor solución, pero funciona para mí.

Me arreglé esto agregando estilo a continuación a la etiqueta DIV

style="background-color: rgba(0, 0, 0, 0.5);"

Y añadir css personalizado

.modal-backdrop {position: relative;}

Intente sobrescribir la clase .modal-abrir el valor de desbordamiento de oculto a visible.

.modal-open {
    overflow: visible;
}