I Have a Landing Page.
The Mobile Has a Fixed Nav Bar in the Bottom Section.
Also Have a Pop-Up Form That Opens As a Result of a Click.
How Can We Ensure That This Nav Bar Is Closed When the Form Is Opened?
It Blocks the Send Button.
Can We Do This With JavaScript?
Nav Bar:
<div class="navbar1">
<a href="#" class="product-action-btn-1" title="Quick View" data-bs-toggle="modal" data-bs-target="#exampleModal"></i>Take an Offer</a>
</div>
You can do this using the css z-index instead of javascript.
Right now you have that bottom nav bar with z-index: 9999, but your .modal z-index is 1060, so if you want the modal to render on top, all you have to do is set the .modal z-index to a higher number than the .navbar1 z-index.
So the easiest fix is simply:
.modal{ z-index: 10000;}
You're probably best off creating a class to hide the element, then toggling that when you call the modal or dismiss it.
document.getElementsByClassName('navbar1')[0].classList.add('hidden')
document.getElementsByClassName('navbar1')[0].classList.remove('hidden')
You could also use classList.toggle if dismissal happens within the same function as the call.
Hide your Navbar when clicked.
<script>
function hideNav() {
document.getElementsByClassName("navbar1").style.display = "none";
}
</script>
<div class="navbar1">
<a onclick="hideNav()" href="#" class="product-action-btn-1" title="Quick View" data-bs-toggle="modal" data-bs-target="#exampleModal"></i>Take an Offer</a>
</div>