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

Related Posts:

listar datos en una vista parcial pasandolos desde una ventana modal – ajax asp.net-mvc asp.net-mvc-5
Pregunta: Tengo una ventana modal con un formulario del cual quiero retornar los datos ingresados a una vista parcial y ponerlos en lista como se ...
¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
Ocultar y Mostrar con Mapa de Google – javascript c# asp.net
Pregunta: Tengo un div en mi página ASP.NET que contiene un Mapa de Google, y necesito mostrarlo y ocultarlo pero no me funciona. Este es el ...
Seleccion desde varias tablas – asp.net sql-server entity-framework
Pregunta: Tengo esta consulta que funciona bien var rest = (from de in se.DeliveryConfiguration ...
Ejecutar función de otro controlador enviando parametros – php laravel laravel-5
Pregunta: Tengo a Controller1 el cual contiene una función llamada actualizarCartera($parametro1, $parametro2, $parametro3), desde Controller2 ¿Cómo hago para ejecutar esta función?, ¿Cómo debo incluír a ...
La consulta espera el parametro @Nombre que no se ha proporcionado – c# asp.net asp.net-mvc
Pregunta: public bool IngresarUsuario(Prueba objeto) { using (SqlConnection cn = Conexion.Conectar("cadenaCon")) { try ...
¿Como obtener la pagina de una fila de una tabla, usando paginacion? – c# jquery asp.net
Pregunta: Supongamos que tengo una tabla que muestro de forma fija 5 filas o registros, con un total fijo de 12 registros, eso hace que ...
alguien sabe como realizar excel con asp c# con store procedure con parametros – c# asp.net asp.net-mvc
Pregunta: Esta pregunta es un duplicado exacto de: ...
Insertar registros con checkbox C# – c# asp.net checkbox
Pregunta: Estoy dando de alta registros en C# ASP.NET con SQL Server, el problema es que no sé cómo declarar los checkbox para que cuando ...
No funciona JQuery en un archivo js – javascript jquery html
Pregunta: Mi problema es que no puedo usar jquery en mis archivos js, apesar que ya esta integrado en html e incluso funciona con bootstrap. Trate ...
¿Como puedo alinear verticalmente un contenido de un div con bootstrap 3? – html css bootstrap
Pregunta: Si observan el ejemplo en una resolución de 1024p podrán observar como el texto del label se extiende y el select pegado a la ...
¿Como enviar parámetros por medio de un ActionLink en MVC? – asp.net asp.net-mvc asp.net-mvc-5
Pregunta: Tengo el siguiente problema, necesito enviar a un controlador unos datos capturados en la vista, pero no encuentro como hacer esto. Estoy haciendo lo ...
contar sabado y domingo en un rango de fechas con datapicker – javascript bootstrap
Pregunta: Como puedo saber cuandos sabados y domingos hay en un rango de fechas 01-01-2017 & 20-01-2017 (por ejemplo), sabiendo que datapicker (bootstrap) tiene un arreglo ...
Error en el paso 5.11 de la guía “Comenzando con Rails” – ruby-on-rails ruby mvc
Pregunta: Estoy siguiendo una de las guías oficiales de Rails para hacer mi primer aplicación: Comenzando con Rails, que consta de 11 pasos en total. ...
Modal no aparece completo – css bootstrap modal
Pregunta: Así aparece mi Modal: Necesito que me aparezca completo y se superponga por delante de todo. Este es mi código: <div class="row"> ...

Add a Comment

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