Abro un form modal en ASP.NET MVC y aparece como inactivo – asp.net bootstrap mvc

Pregunta:


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í

Preguntado por: Javier Cordova

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

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

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

Fuente

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *