1

Buenas noches tengo una pequeña duda, estoy abriendo un form modal y cuando presiono el boton que lo abre sale como si el form modal estuviera inactivo (adjunto la imagen) y si doy click sobre cualquier parte, se cierra, quizas estoy olvidando alguna librería? `Dejo el código con el cual abro el modal

<div>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
     <i class="fa fa-plus"></i>Agregar una cuenta
   </button>
                                </div>

` introducir la descripción de la imagen aquí

3 respuestas 3

2

Me respondo a mí mismo por si alguien mas lo necesita: aumente lo siguiente en el div principal del modal

data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5); quedando así:

<div id="formModal" class="modal fade" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" aria-hidden="true">

El problema era que existía un conflicto con los contenedores primarios, con esas propiedades se evita el fondo, también se podría mover el div del modal fuera del contenedor principal y listo!.

1

Utilicé el código que dejaste para abrir un modal y si funciono. Te dejo el código que utilice.

<div>
<div id="formModal" class="modal fade"  role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin: 18% auto; width: 360px">
        <div class="modal-content cont">
            <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">Cuadro de diálogo</h4>
            </div>
            <div class="modal-body">
                <p>Modal de prueba</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">X</button>
            </div>
        </div>
    </div>
</div>

<div class="text-center">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
        <i class="fa fa-plus"></i>Agregar una cuenta
    </button>
</div>

Modal

5
  • Gracias por responder @RenzoMaldonado pero si abre el modal, pero sale de color gris como si estuviese desactivada.
    – javco11
    Commented el 22 mar. 2017 a las 3:14
  • @JavierCordova ¿Puedes subir el html del div que muestras como modal? Commented el 22 mar. 2017 a las 3:17
  • Claro @RenzoMaldonado
    – javco11
    Commented el 22 mar. 2017 a las 3:29
  • Con el código que colocaste si carga el modal como debe ser, en otra parte del HTML debe estar el conflicto. Commented el 22 mar. 2017 a las 4:08
  • Al parecer si hay conflicto pero no logro detectarlo, seguiré revisando, gracias @RenzoMaldonado
    – javco11
    Commented el 22 mar. 2017 a las 4:13
1

Sucede eso porque en algún punto al .backdrop se le modifica su propiedad z-idex o bien al .modal.

Para solucionarlo es agregar una regla css al .modal

.modal {
  /*Cambiando el z-indez del modal*/
  z-index: 1001 !important;
}

o bien una regla css al .backdrop

.backdrop{
  /*Cambiando el z-indez del backdrop*/
  z-index: 1001 !important;
}

Nota: El numero puede ser mucho mayor en el caso del .modal o menor en caso del .backdrop

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.