Tengo una página de destino.
El móvil tiene una barra de navegación fija en la sección inferior.
También tenga un formulario emergente que se abra como resultado de un clic.
¿Cómo podemos asegurarnos de que esta barra de navegación esté cerrada cuando se abre el formulario?
Bloquea el botón Enviar.
¿Podemos hacer esto con JavaScript?
Barra de navegación:
<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>Puede hacer esto usando css z-index en lugar de javascript.
En este momento, tiene esa barra de navegación inferior con z-index: 9999 , pero su índice z .modal es 1060, por lo que si desea que el modal se muestre en la parte superior, todo lo que tiene que hacer es establecer el índice z .modal en un número más alto que el índice z .navbar1.
Así que la solución más fácil es simplemente:
.modal{ z-index: 10000;}Probablemente sea mejor que cree una clase para ocultar el elemento y luego la cambie cuando llame al modal o lo descarte.
document.getElementsByClassName('navbar1')[0].classList.add('hidden') document.getElementsByClassName('navbar1')[0].classList.remove('hidden')También puede usar classList.toggle si el despido ocurre dentro de la misma función que la llamada.
Oculte su barra de navegación al hacer clic.
<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>