Bootstrap, modales apilados y problemas de Scroll,

Cuando estamos utilizando Bootstrap quizás alguna vez has tenido la necesidad de anidar varios Modales, es decir, que aparezca un Modal sobre otro Modal.

Si te has encontrado con el problema de que tras aparecer el 2º Modal y luego cerrarlo, el 1º Modal ya ha perdido la capacidad de hacer Scroll, te he encontrado una solución bastante sencilla.

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

Solución obtenida de: Quick Fix: Scrolling and Focus when multiple bootstrap modals are open – James’ Desk (wordpress.com)

El código se activa tras ocultarse cualquier Modal, luego comprueba si hay algún Modal Visible y añade al Modal visible la clase “modal-open” la cual devuelve de nuevo la funcionalidad del scroll.

La clase “modal-open” se elimina de todos los modales, aunque estén abiertos tras cerrar cualquier modal, por eso provoca el fallo del scroll en el modal que queda visible.

Para Bootstrap ese modal que aún está visible sin la clase “modal-open” lo reconocerá como “cerrado”, por eso se queda el scroll inutilizado.

La solución de este código es siempre comprobar si queda algún modal visible tras cerrar cualquier modal y añadir la clase “modal-open” para que Bootstrap entienda que ese modal sigue abierto y por consecuencia que siga funcionando perfectamente el scroll.

De esta forma conseguimos volver a activar el 1º Modal, tras cerrar el 2º Modal, de tal forma que volvemos a recuperar la capacidad de hacer scroll.

Es una solución muy sencilla, tan sólo tendrás que poner el fragmento de código anterior en un archivo .js principal, para que cuando se cargue la página registre el evento y pueda ejecutarse siempre que sea necesario.

¿Te ha sido útil esta solución?, si tienes una solución mejor ¡coméntalo!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Información básica sobre protección de datos Ver más

  • Responsable NarixaSoft.es.
  • Finalidad  Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios  NarixaSoft.es.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver Política de cookies
Privacidad
Abrir chat
¡Buenas!👋🏻😎
Si necesitas más información o ayuda escríbenos! 😉👍