0
124
Vistas¿Cómo permitir la interacción de la página mientras Bootstrap modal está activo?
Tengo un fondo modal para evitar que el usuario interactúe con la página mientras el modal está activo.
<div class="modal fade" data-backdrop="false" id="calibration_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"></div>Aunque me gustaría permitir que el usuario haga clic en la barra de navegación e vaya a otra página sin cerrar el modal, mientras bloquea los otros elementos de la página.
¿Es posible? (Estoy usando bootstrap 5)
1 Respuestas
Responde la pregunta0
Puede lograr eso solo con JavaScript, Bootstrap no parece proporcionar ninguna API externa para ello.
Lo que sucede es que cada vez que se activa un modal (es decir, se hace clic en un botón), una superposición cubre todos los elementos de la página, por lo que los elementos están debajo de esa superposición translúcida, por lo que no se puede acceder a ellos y, por lo tanto, no se puede hacer clic en ellos.
Sin embargo, lo que podemos hacer es hacer que la barra de navegación sea "más alta" que el modal agregando un atributo de índice z a su hoja de estilo. Vea a continuación, que el modal Bootstrap tiene un valor de 1060.
TLDR: use un valor de índice z superior a 1060 para su barra de navegación. Así siempre estará en la cima. PERO asegúrese de empujar el modal hacia abajo jugando con los márgenes/posiciones en SUS archivos CSS. Dado que la barra de navegación y el modal pueden superponerse.
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>