Open an Modal window from Navigation bar

Question

I\'m trying to open a modal window from navigation bar. I\'ve followed some good tutorials and once I pressed my link a modal opened, problem is model window looks like not

Answer 1

I am experiencing this same issue. The only way I could fix it was by adding a jQuery click on the link in the navbar to override the bootstrap default. Like so:

$("#navbar_register_btn").on("click",function(e){
    e.preventDefault();
    $('#basicModal').modal('show');
})

You will need to give your link in the navbar an id of "navbar_register_btn" in this case.

Answer 2

  <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="exampleModalCenterTitle">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>

Answer 3

This is covered in the official documentation:

Modal markup placement

Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

Put the <div> that has the modal class outside of the navbar. You can leave the modal-triggering <a> in the navbar.

Answer 4

<nav class="navbar bg-secondary">
        <div
            class="collapse navbar-collapse float-right" id="navcol-1" style="color:rgb(255,255,255);">
            <ul class="nav navbar-nav ml-auto" role="navigation">
                <li><a href="#myModal" data-toggle = "modal" data-target= "#myModal" class="nav-link">Contact us</a></li>
                </ul>
        </div>
    </div>
</nav>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content"> 
            <div class="modal-header">
                <h5 class="modal-title">For your Queries</h5> 
            </div>
            <div class="modal-body">
                IF you have any questions, Mess Manager Office number is <strong>+01234567890</strong> or you can email us by <strong>Ouremail@domain.com</strong>>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss = "modal">Close</button>
            </div>
        </div>
    </div>
</div>