es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Prevenir interacción con la página mientras el modal está abierto.

16 Jul, 2023 Programación

Esta parece ser una pregunta sencilla que seguramente he visto resuelta, pero no puedo encontrar la respuesta.

Básicamente, quiero desactivar la página detrás de un modal de Bootstrap cuando se muestra. En mi ejemplo, estoy mostrando un modal cuando intento navegar más allá del principio/final de una tabla, advirtiendo al usuario sobre ello. Pero, si antes de cerrarlo, lo vuelven a hacer, obtengo un segundo modal apilado encima del primero, y ahora tienen que cerrar dos ventanas… etc, etc, etc…

¿Cómo puedo evitar eso?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puedes evitar el apilamiento de modales agregando la clase “modal-open” al elemento body, lo cual deshabilitará el desplazamiento y evitará que el usuario haga clic en elementos detrás del modal.

    Para lograr esto, puedes utilizar el siguiente código JavaScript para agregar o eliminar la clase dinámicamente:

    $('#myModal').on('show.bs.modal', function () {
  $('body').addClass('modal-open');
});

$('#myModal').on('hidden.bs.modal', function () {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

    Aquí, #myModal es el ID de tu elemento modal. El evento show.bs.modal se activa cuando se muestra el modal y el evento hidden.bs.modal se activa cuando se cierra el modal.

    En el manejador de eventos show.bs.modal, agregamos la clase “modal-open” al elemento body.

    En el manejador de eventos hidden.bs.modal, verificamos si hay otros modales visibles en la página. Si hay, dejamos la clase “modal-open” en el elemento body, ya que queremos evitar el desplazamiento y hacer clic en elementos detrás de cualquier modal abierto. Si no hay modales visibles, eliminamos la clase “modal-open”, lo que permite el desplazamiento y hacer clic en elementos detrás del modal.

    Esto debería evitar el apilamiento de modales y asegurarse de que solo se muestre un modal a la vez.

Comments are closed.