4

Trabajo con ASP.NET MVC 5 no puedo mostrar un formulario modal popup cuando lo llamo desde un botón flotante se muestra y automaticmente se cierra solo se ve segundos la vista modal popup. Muestro código.

HTML

<div class="contenedor">
            <button class="botonF1">
                <span>+</span>
            </button>
            <button class="btn botonF2">
                <span>+</span>
            </button>
            <button class="btn botonF3">
                <span>+</span>
            </button>
            <button class="btn botonF4">
                <span>+</span>
            </button>
            <button class="btn botonF5" onclick="llamarVistaParcial();" data-toggle="modal" data-target="#myModal">
                <span>+</span>
            </button>
        </div>

MODAL desde el Index

div id="myModal" class="modal fade in">
    <div class="modal-content" >
        <div class="modal-header" style="background-color: #337ab7;border-color:#2e6da4;color:#fff;">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h5 class="modal-title" >Proveedor</h5>
        </div>
        <div class="modal-body">
            <div id="resultado"></div>
        </div>
    </div>

CSS

*{


 margin:0;

    }
header{
  height:170px;
  color:#FFF;
  font-size:20px;
  font-family:Sans-serif;
  background:#009688;
  padding-top:30px;
  padding-left:50px;
}
.contenedor{
  width:90px;
  height:240px;
  position:absolute;
  right:0px;
  bottom:0px;
}
.botonF1{
  width:60px;
  height:60px;
  border-radius:100%;
  background:#F44336;
  right:0;
  bottom:0;
  position:absolute;
  margin-right:16px;
  margin-bottom:16px;
  border:none;
  outline:none;
  color:#FFF;
  font-size:36px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition:.3s;  
}
span{
  transition:.5s;  
}
.botonF1:hover span{
  transform:rotate(360deg);
}
.botonF1:active{
  transform:scale(1.1);
}
.btn{
  width:40px;
  height:40px;
  border-radius:100%;
  border:none;
  color:#FFF;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  font-size:28px;
  outline:none;
  position:absolute;
  right:0;
  bottom:0;
  margin-right:26px;
  transform:scale(0);

    }
.botonF2{
  background:#2196F3;
  margin-bottom:85px;
  transition:0.5s;
}
.botonF3{
  background:#673AB7;
  margin-bottom:130px;
  transition:0.7s;
}
.botonF4{
  background:#009688;
  margin-bottom:175px;
  transition:0.9s;
}
.botonF5{
  background:#FF5722;
  margin-bottom:220px;
  transition:0.99s;
}
.animacionVer{
  transform:scale(1);
}

JS

$(document).ready(function () {
$('.botonF1').hover(function () {
    $('.btn').addClass('animacionVer');
})
$('.contenedor').mouseleave(function () {
    $('.btn').removeClass('animacionVer');
})
});

JS POPUP

<script>
            function llamarVistaParcial() {
                var laURLDeLaVista = '@Url.Action("CreatePV", "Proveedor")';
                $.ajax({
                    cache: false,
                    async: true,
                    type: "GET",
                    url: laURLDeLaVista,
                    data: {},
                    success: function (response) {
                        //$('#resultado').html('');
                        $('#resultado').html(response);
                    }
                });
                $("#myModal").modal('show');
            };
        </script>

¿Que estoy haciendo mal?

5
  • ¿&times para que es?: <button type="button" class="close" data-dismiss="modal">&times;</button>
    – A. Cedano
    el 21 feb. 2017 a las 18:16
  • @A.Cedano es para cerrar el modal el &times; representa en HTML a X.
    – JuankGlezz
    el 21 feb. 2017 a las 18:24
  • @PedroÁvila No veo ningún problema en tu código, intenta presionar las teclas ctrl + F5 teniendo abierta el inspector de código del navegador esto refrescara la pagina y eliminara el cache
    – JuankGlezz
    el 21 feb. 2017 a las 18:38
  • Hola Pedro, esta vez no me quedó clara tu pregunta, ¿el modal se muestra unos segundos y luego se cierra?
    – Phi
    el 21 feb. 2017 a las 18:38
  • @Flxtr Así es amigo. el 21 feb. 2017 a las 18:50

2 respuestas 2

3

Creo que deberías añadir el $("#myModal").modal('show'); dentro del success de la llamada ajax.

Al ser una llamada asíncrona, el modal no se abre justo después de tener el html incrustado. Tendría que abrirse justo después de recibir el response. El resultado final sería así:

$.ajax({
   cache: false,
   async: true,
   type: "GET",
   url: laURLDeLaVista,
   data: {},
   success: function (response) {
       $('#resultado').html(response);
       $("#myModal").modal('show');
   }
});
-3

Estoy seguro que es problema del orden en que has agregado los .css y .js, y puede que incluso no hayas agregado alguno de bootstrap. Para la otra aporta un Jsfiddle, o al menos indica si hay error en consola o no.

Mira este Jsfiddle que te hice:

https://jsfiddle.net/pmiranda/29nvq5rf/

1
  • 1
    Bienvenido al sitio. Te recomiendo colocar el código del jsfiddle aquí puesto que eso haría que tu respuesta sea más completa y auto sostenida. Cabe resaltar que los enlaces son para brindar información adicional y, en el peor de los casos, pueden expirar, por lo que si la respuesta depende solo de enlaces externos y ellos se quiebran, entonces la respuesta pierde su esencia. Adicional a esta edición, puedes mantener el enlace al jsfiddle.
    – user227
    el 22 feb. 2017 a las 2:42

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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