Home / Questions / 15987
Accepted
Ricardo A
Asked: 2020-07-06 19:22:11 +0800 CST 2020-07-06 19:22:11 +0800 CST

Why isn't my Bootstrap modal hiding?

  • 772

I made a modal with Bootstrap and everything went exactly as I wanted, the only problem is that it appears right below the button that is supposed to make the modal appear, why does this happen? How can I solve it? Here I leave my code and an image of what is happening.

<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>

enter image description here

javascript

3 Answers

  1. Best Answer

    the modal looks like this because you have declared the modal wrong.
    I explain:

    • You have a misspecified modal class modal-fadewhereby the modal is made visible as if it were a "static" div and not "invisible".
    • Change the above class you mention to modal fadey should no longer be displayed below the button.

    I hope this fixes your problem :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>

    • 2 

  2. <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>

    • 0

  3. The problem is that if you click on the OK button it doesn't exit the modal

    • -1