Open an Modal window from Navigation bar
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.
<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>[email protected]</strong>>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
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.