entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Problema con modals (Bootstrap)

Buenas.

Estoy teniendo un problema con los modals que provee Bootstrap, hace un mes prácticamente que no tocaba el código de mi proyecto y por ende decidí retomarlo actualizando a la nueva versión de Boostrap y también renovando los jQuery. Nunca me llevé muy bien con esto último y yo creo que acá radica el problema. Anteriormente me funcionaban perfecto los modals, abrían bien, cerraban, todo a la perfección. Al principio tuve un error, no se auto-iniciaba el carousel de Bootstrap ni tampoco me funcionaba un script con JS, así que no recuerdo bien que toqué (porque llevo un par de horas analizando este tema), creo que actualicé la versión de jQuery y ésto se solucionó, pero ahora, estoy teniendo, como bien decía, el problema de los modals.

El problema es que, al hacer click en el botón que abre un modal la página se refresca (como si daría F5) y no muestra el contenido que hay en él. En donde uso los modals tengo justo campos de un formulario con required, por lo que si clickeo el botón para abrir el modal me obliga primero a llenar los campos, después, una vez que hago eso, lo clickeo y se refresca la página.

Estoy segurísimo que algo está mal en el orden que cargo los .css y .js o no sé bien. Antes tenía algo similar a esto en el footer pero no recuerdo qué, lo borré (mal de mi parte).

Inicio de la web

    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link href="css/slider.css" rel="stylesheet">
    <link href="css/lrp.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,300,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/font-awesome.css">
    <link href="css/jquery.modal.css" type="text/css" rel="stylesheet" />
    <link href="css/jquery.modal.theme-xenon.css" type="text/css" rel="stylesheet" />
    <link href="css/jquery.modal.theme-atlant.css" type="text/css" rel="stylesheet" />
    <!-- jQuery -->
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-confirmation.js"></script>
    <script src="js/npm.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="js/jquery.magnific-popup.js"></script>
    <script type="text/javascript" src="js/jquery.modal.js"></script>
    <script type="text/javascript">

Footer (acá únicamente tengo el tiempo de intervalo para el carousel Bootstrap que ya funciona)

    <script>
    $('.carousel').carousel({
        interval: 5000
    })
    </script>

De ser necesario que brinde el código por favor avisarme, sin embargo dudo muchísimo que sea esto ya que como mencioné, el código de los modals no fue tocado y anteriormente funcionaba perfecto, lo único que toqué fue el principio de la web y el footer.

Gracias.

0voto

Leyes comentado

Me encantaría que alguien pudiese ayudarme en esta pregunta, ¿tienen una idea de qué podrá estar sucediendo? Muchas gracias.

1 Respuesta

2votos

cobasESP Puntos19650

Prueba a sacar el botón que abre el modal fuera de las etiquetas <form></form> asi no haces submit y abriría el modal, pero después deberías hacer tu el submit programáticamente al cerrar el modal.

Aun asi solo nos proporcionas el código donde importas las hojas de estilo y los scripts, ahi no podemos ver nada, si tienes la página funcional subida a un hosting seria de ayuda para ver porque no funciona y sino el código también valdría.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta