0

Estoy usando este template con Bootstrap 4:
https://blackrockdigital.github.io/startbootstrap-agency/

Lo que quiero lograr y no puedo, es que al abrir los modals del portfolio, se bloquee el scroll del body. En la versión desktop el template funciona correctamente y bloquea tanto el click fuera del modal y el scroll, pero para mobile no encuentro solución.
Necesito algún código que impida que al abrir cualquiera de los modals (son varios modals, uno por cada item del portfolio), se deshabilite el scoll del body o se bloquee, ya que resulta un poco molesto. Si es posible, que funcione tanto para Android como para IOs.

2
  • Necesitas deshabilitar solo del body? para que no de scroll lo que se ve atrás del modal o bloquear el modal que se quede fijo? si es esto, no te daría problemas cuando quieras agregar contenido extenso?
    – TheVicShow
    el 30 ene. 2019 a las 15:18
  • Hola! Lo que pondré en el modal es un texto pequeño que no necesita scroll. Yo solo quiero bloquear el scroll de lo que se ve atrás del modal! el 30 ene. 2019 a las 15:30

1 respuesta 1

1

Detecta si el dispositivo es movil y simplmente desactiva la opcion de overflow.

Ahora te faltaria introducir este codigo en el evento del modal cuando se abra. Espero que te sirva

function isMobile(){
    return (
        (navigator.userAgent.match(/Android/i)) ||
        (navigator.userAgent.match(/webOS/i)) ||
        (navigator.userAgent.match(/iPhone/i)) ||
        (navigator.userAgent.match(/iPod/i)) ||
        (navigator.userAgent.match(/iPad/i)) ||
        (navigator.userAgent.match(/BlackBerry/i))
    );
}
if(isMobile()) document.body.style.overflow = "hidden";

p.d.: he puesto body como contenidor global, pero si no te sirve, cambialo

2
  • Este código tendría que ir dentro de una etiqueta script cierto? el 30 ene. 2019 a las 15:32
  • Si, correcto, dentro del evento que te habre el modal el 30 ene. 2019 a las 19:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.