0
121
ViewsHow to allow page interaction while Bootstrap modal active?
I have a modal backdrop in place to prevent user from interacting with the page while the modal is active.
<div class="modal fade" data-backdrop="false" id="calibration_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"></div>
Although I would like to allow the user to click the navigation bar and go to another page without closing the modal, while still blocking the other elements of the page.
Is it possible? (I am using bootstrap 5)
1 answers
Answer question0
You can accomplish that with JavaScript only, Bootstrap doesn't seem to give any external API for it.
What happens is that whenever a modal is activated(i.e. button clicked) an overlay covers all elements of the page, so the elements are beneath that translucent overlay so they are unreachable and therefore, unclickable.
What we can do however is make the navigation bar "higher" than the modal by adding a z-index attribute to its stylesheet. See below, that the Bootstrap modal has a value of 1060.
TLDR: Use a z-index value of greater than 1060 for your navigation bar. So it'll always be on top. BUT be sure to also push the modal downwards by tinkering with the margins/positions in YOUR CSS files. Since, the navbar and modal may overlap.
var modalToggle = new bootstrap.Modal(document.getElementById('staticBackdrop'));
modalToggle.show();.modal-dialog.dropped {
margin-top: 100px;
}
nav {
z-index: 1200;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog dropped">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>