Hide the Nav Bar When the Pop Up Opens-CodePudding

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.

CodePudding user response：

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;}

CodePudding user response：

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.

CodePudding user response：

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>