Doubt regarding Modal Bootstrap

Asked

Viewed 98 times

0

I inserted a Modal in my HTML, however, for some reason apparently it is stuck in some part of the code , I can visualize the modal, but I can’t perform actions inside it , code and print below:

inserir a descrição da imagem aqui

 <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
          aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                ...
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
html css html5 bootstrap-4
  • 1

    Face if you’ve done something CSS also include in the question

2 answers

1


Apparently there is another element with a "z-index" higher than yours in the "modal" class. Try increasing the size of the "z-index" of the "modal" class through the console and see if it resolves.

  • It was the Z-INDEX! Thank you

1

looking over, your modal has two more than necessary (it has already cost me hours of work, one or one less

these modals should be at the end of the page, just before the closure of , outside any other tag

Browser other questions tagged html css html5 bootstrap-4

You are not signed in. Login or sign up in order to post.