0

Buenas, tengo un problema con las ventanas modales de Bootstrap, Esta se cierra sola al abrirla, pincho en el botón, la abro. y en menos de un segundo se cierra, y si no se cierra sola, al mover el ratón se cierra. Es muy raro.

Añado todo el código de la página para ver si algo entra en conflicto

<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Galería de fotos</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
<div class="container">
    <div class="col-md-12">
        <h1>Añadir elemento a la galería</h1><br>
    </div>

    <div class="col-sm-8 col-md-7">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputNombre" class="col-sm-2 control-label">Nombre</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputNombre">
                </div>
            </div>

            <div class="form-group">
                <label for="inputNombre" class="col-sm-2 control-label">Imagen</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="inputUrl" placeholder="URL">
                </div>
                <div class="col-sm-2">
                    <button class="btn btn-success" data-toggle="modal" data-target="#myModal">Upload</button>
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <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" id="myModalLabel">Subir imagen</h4>
                                </div>
                                <div class="modal-body">
                                    ...
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                                    <button type="button" class="btn btn-primary">Aplicar cambios</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- modal -->
                </div>
            </div>



            <div class="form-group">
                <label for="inputCategoria" class="col-sm-2 control-label">Categoría</label>
                <div class="col-sm-10">
                    <select class="form-control" name="categoria">
                        <option value="opc" disabled selected>Seleccione una opción...</option>
                        <option value="materiales">Materiales</option>
                        <option value="montajes">Montajes</option>
                        <option value="videos">Videos</option>
                        <option value="equipamientodj">Equipamiento DJ</option>
                        <option value="escenarios">Escenarios</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="inputAlt" class="col-sm-2 control-label">Alt</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputPassword3">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary">Subir</button>
                </div>
            </div>
        </form>
    </div>
</div>

</body>
</html>
2
  • El código está funcionando bien, no se cierra como manifiesta en su pregunta, quizá hay algo adicional que no muestra en el ejemplo que provoca el cierre de la ventana modal.
    – Dev. Joel
    Commented el 22 oct. 2016 a las 18:12
  • Voy a poner todo el código de la página para ver si podéis localizar algo que interfiera.
    – David
    Commented el 22 oct. 2016 a las 18:28

2 respuestas 2

2

Este comportamiento suele pasar cuando el boton que abre la ventana modal está dentro de un form ya que no se le asigna un type al button por defecto le da un type submit según la documentación button que es el motivo principal de su problema, o cuando se cargan Bootstrap.js and Modal.js juntos , en su caso es la primera opción , para solucionar este inconveniente cambiar el Button por un input type button

<input type="button" class="btn btn-success" data-toggle="modal"
  value="Upload" data-target="#myModal" />

<!--O Un type directamente a su etiqueta Button-->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Upload</button>
1
  • Gracias! funciona!
    – David
    Commented el 23 oct. 2016 a las 5:09
1
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Upload</button>

Colocale un tipo al boton, asi se arreglara, si tienes dudas comenta, Slds...

1
  • Gracias! funciona!
    – David
    Commented el 23 oct. 2016 a las 5:09

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