0

Hice un modal con Bootstrap y todo me salió tal y como quería, el único problema es que aparece justo debajo del botón que se supone que tendría que hacer que apareciera el modal ¿Por qué pasa esto? ¿Cómo lo puedo solucionar? Aqui les dejo mi código y una imagen de que es lo que pasa.

<p>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nombralo">Nombra esta foto</button>
        <div class="modal-fade" tabindex="-1" role="dialog" id="nombralo">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Dale nombre a esta foto</h4>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="message-text" class="control-label">Nombra la foto:</label>
                    <input type="text" class="form-control" id="message-text">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Aceptar</button>
              </div>
            </div>
          </div>
        </div>
        <h1></h1>

    </p>

introducir la descripción de la imagen aquí

3 respuestas 3

2

el modal se ve así porque tienes declarado mal el modal.
Te explico:

  • Tienes una clase del modal mal especificada modal-fade por el cual el modal se hace visible como si fuese un div "estatico" y no "invisible".
  • Cambie la clase anterior que mencione por modal fade y ya no se debe mostrar debajo del boton.

Espero esto arregle tu problema :D

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nombralo">Nombra esta foto</button>
        <div class="modal fade" tabindex="-1" role="dialog" id="nombralo">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Dale nombre a esta foto</h4>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="message-text" class="control-label">Nombra la foto:</label>
                    <input type="text" class="form-control" id="message-text">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Aceptar</button>
              </div>
            </div>
          </div>
        </div>

1
  • Muchisimas gracias!!!
    – Ricardo A
    Commented el 6 jul. 2016 a las 4:20
0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nombralo">Nombra esta foto</button>
        <div class="modal fade" tabindex="-1" role="dialog" id="nombralo">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Dale nombre a esta foto</h4>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="message-text" class="control-label">Nombra la foto:</label>
                    <input type="text" class="form-control" id="message-text">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Aceptar</button>
              </div>
            </div>
          </div>
        </div>

-1

El problema es que si haces click en botón ACEPTAR no sale del modal

2
  • A mi pasa similar cuando en el botón aceptar llama una función CLICK de Angular y si bien la ejecuta en ella hago $('#myModal-' + id).modal('hide'); pero la pantalla queda opacada. Commented el 20 jul. 2018 a las 2:20
  • esto es mas un comentario que una respuesta, que no debería colocarse el el área de respuestas, por favor revisa Cómo responder
    – user75901
    Commented el 20 jul. 2018 a las 3:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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