html - example - ¿Cómo evitar el desplazamiento en segundo plano cuando se abre Bootstrap 3 modal en los navegadores móviles?

modal html

Question

¿Cómo evitar el desplazamiento en segundo plano cuando Bootstrap 3 modal se abre en las plataformas móviles? En los navegadores de escritorio, el fondo no puede desplazarse y funciona como debería.

En los navegadores móviles (Safari ios, Chrome ios, etc.), cuando se abre un modal y usa su dedo para desplazarse, el fondo también se desplaza como lo hace el modal. ¿Cómo lo evito?

Answer 1

Abrí un modal después de un modal y un hecho el error en el desplazamiento modal, y este css resolvió mi problema:

.modal {
    overflow-y: auto;
    padding-right: 15px;
}

Answer 2

Como adicional a @Karthick Kumar responde de los documentos de arranque

show se activa al inicio de un evento

se muestra se activa cuando se completa una acción

... así debería ser:

$(''.modal'')
    .on(''show.bs.modal'', function (){
            $(''body'').css(''overflow'', ''hidden'');
        })
    .on(''hide.bs.modal'', function (){
            // Also if you are using multiple modals (cascade) - additional check
            if ($(''.modal.in'').length == 1) {
                $(''body'').css(''overflow'', ''auto'');
            }
        });

Answer 3

Cortesía de JDiApice quien sintetizó y extendió el trabajo de otros colaboradores en el tema de desplazamiento modal iOS 8.x # 14839 :

@media only screen and (max-device-width:768px) {

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
    }
}

body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute;
}

body {
    overflow-x: hidden;
    overflow-y: scroll !important;
}

/* The reason the media specific is on there is 
   on a desktop i was having issues with when the modal would open 
   all content on the page would shift from centered to left. 
   Looked like crap. So this targets up to tablet size devices 
   where you would need to scroll. There is still a slight shift 
   on mobile and tablet but its really not much. */

A diferencia de las otras soluciones que probamos, no desplaza el fondo hacia la parte superior después de que se cierra el modo emergente.

Answer 4

Encontré una solución simple javascript / jquery que utiliza los eventos modales de arranque.

Mi solución también corrige la position:fixed problema position:fixed en el que se desplaza la página de fondo hasta el final, en lugar de permanecer en su lugar cuando se abre / cierra la ventana modal.

Ver detalles here

Answer 5

Esto podría ser un poco como vencer a un caballo muerto aquí ... pero, mi solución actualmente implementada en modales DIY a través de vanilla JS:

En demostración modal:

if (document.body.style.position !== ''fixed'') {
    document.body.style.top = -window.scrollY + ''px'';
    document.body.style.position = ''fixed'';
}

En modal hide:

document.body.style.position = '''';
window.scrollTo(0, -parseInt(document.body.style.top, 10));
document.body.style.top = '''';

Answer 6

Evita que el fondo se desplace sin problemas.

También evita que la página salte de las barras de desplazamiento que faltan

body.modal-open {
        position: fixed;
        overflow-y: scroll;
    }

Answer 7

Hola chicos, creo que encontré una solución. Esto está funcionando para mí en iPhone y Android en este momento. Es una mezcla de horas y horas de búsqueda, lectura y prueba. Entonces, si ves partes de tu código aquí, el crédito es para ti, lol.

@media only screen and (max-device-width:768px){

body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
}

body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute; 
}

body {  
overflow-x: hidden;
overflow-y: scroll !important;
}

La razón por la cual el contenido específico de los medios está allí es en un escritorio con el que tenía problemas cuando el modal abría todo el contenido de la página que cambiaba de centrado a izquierdo. Parecía una mierda. Por lo tanto, esto se dirige a los dispositivos de tamaño de tableta donde tendría que desplazarse. Todavía hay un ligero cambio en el móvil y la tableta, pero realmente no es mucho. Avísame si esto funciona para ustedes. Espero que esto ponga el clavo en el ataúd

Answer 8

La solución elegida funciona, sin embargo, también recortan el fondo en la posición de desplazamiento superior. Extendí el código de arriba para arreglar ese ''salto''.

//Set 2 global variables
var scrollTopPosition = 0;
var lastKnownScrollTopPosition = 0;

//when the document loads
$(document).ready(function(){

  //this only runs on the right platform -- this step is not necessary, it should work on all platforms
  if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {

    //There is some css below that applies here
    $(''body'').addClass(''platform-ios'');

    //As you scroll, record the scrolltop position in global variable
    $(window).scroll(function () {
      scrollTopPosition = $(document).scrollTop();
    });

    //when the modal displays, set the top of the (now fixed position) body to force it to the stay in the same place
    $(''.modal'').on(''show.bs.modal'', function () {

      //scroll position is position, but top is negative
      $(''body'').css(''top'', (scrollTopPosition * -1));

      //save this number for later
      lastKnownScrollTopPosition = scrollTopPosition;
    });

    //on modal hide
    $(''.modal'').on(''hidden.bs.modal'', function () {

      //force scroll the body back down to the right spot (you cannot just use scrollTopPosition, because it gets set to zero when the position of the body is changed by bootstrap
      $(''body'').scrollTop(lastKnownScrollTopPosition);
    });
  }
});

El CSS es bastante simple:

// You probably already have this, but just in case you don''t
body.modal-open {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
//only on this platform does it need to be fixed as well
body.platform-ios.modal-open {
  position: fixed;
}

Answer 9

Las respuestas anteriores no ayudaron, entonces lo que hice fue:

.modal {
  -webkit-overflow-scrolling: touch; 
}

Mi problema particular fue cuando aumenté el tamaño modal después de cargar.

Es un problema conocido de iOS, mira aquí . Como no rompe nada, la solución anterior fue suficiente para mis necesidades.

Answer 10

Mi solución...

Ver en jsfiddle

//Fix modal mobile Boostrap 3
function Show(id){
    //Fix CSS
    $(".modal-footer").css({"padding":"19px 20px 20px","margin-top":"15px","text-align":"right","border-top":"1px solid #e5e5e5"});
    $(".modal-body").css("overflow-y","auto");
    //Fix .modal-body height
    $(''#''+id).on(''shown.bs.modal'',function(){
        $("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
        h1=$("#"+id+">.modal-dialog").height();
        h2=$(window).height();
        h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
        h4=h2-(h1-h3);      
        if($(window).width()>=768){
            if(h1>h2){
                $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
            }
            $("#"+id+">.modal-dialog").css("margin","30px auto");
            $("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
            $("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);               
            if($("#"+id+">.modal-dialog").height()+30>h2){
                $("#"+id+">.modal-dialog").css("margin-top","0px");
                $("#"+id+">.modal-dialog").css("margin-bottom","0px");
            }
        }
        else{
            //Fix full-screen in mobiles
            $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
            $("#"+id+">.modal-dialog").css("margin",0);
            $("#"+id+">.modal-dialog>.modal-content").css("border",0);
            $("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);   
        }
        //Aply changes on screen resize (example: mobile orientation)
        window.onresize=function(){
            $("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
            h1=$("#"+id+">.modal-dialog").height();
            h2=$(window).height();
            h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
            h4=h2-(h1-h3);
            if($(window).width()>=768){
                if(h1>h2){
                    $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
                }
                $("#"+id+">.modal-dialog").css("margin","30px auto");
                $("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
                $("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);               
                if($("#"+id+">.modal-dialog").height()+30>h2){
                    $("#"+id+">.modal-dialog").css("margin-top","0px");
                    $("#"+id+">.modal-dialog").css("margin-bottom","0px");
                }
            }
            else{
                //Fix full-screen in mobiles
                $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
                $("#"+id+">.modal-dialog").css("margin",0);
                $("#"+id+">.modal-dialog>.modal-content").css("border",0);
                $("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);   
            }
        };
    });  
    //Free event listener
    $(''#''+id).on(''hide.bs.modal'',function(){
        window.onresize=function(){};
    });  
    //Mobile haven''t scrollbar, so this is touch event scrollbar implementation
    var y1=0;
    var y2=0;
    var div=$("#"+id+">.modal-dialog>.modal-content>.modal-body")[0];
    div.addEventListener("touchstart",function(event){
        y1=event.touches[0].clientY;
    });
    div.addEventListener("touchmove",function(event){
        event.preventDefault();
        y2=event.touches[0].clientY;
        var limite=div.scrollHeight-div.clientHeight;
        var diff=div.scrollTop+y1-y2;
        if(diff<0)diff=0;
        if(diff>limite)diff=limite;
        div.scrollTop=diff;
        y1=y2;
    });
    //Fix position modal, scroll to top.    
    $(''html, body'').scrollTop(0);
    //Show
    $("#"+id).modal(''show'');
}

Answer 11

No se necesitan guiones

BS 3 establece una clase .modal-open en el cuerpo que puede usar para establecer los valores de posición y desbordamiento (realizados con LESS).

body {
    font-family:''Open Sans'';
    margin:0;

    &.modal-open {
        position:fixed;
        overflow:hidden;

        .modal { 
            overflow: scroll;

            @media only screen and (min-resolution:150dpi) and (max-width: @screen-sm),
            only screen and (-webkit-min-device-pixel-ratio:1.5) {
                overflow: scroll; 
                -webkit-overflow-scrolling: touch; 
            }
        }
    }   
}

Answer 12

Pensé que podría olvidarse de agregar data-toggle="modal" atributos data-toggle="modal" al enlace o botón que desencadena el evento emergente modal. En primer lugar, también tengo el mismo problema pero, después de agregar el atributo anterior, funciona bien para mí.

Answer 13

Probé la respuesta aceptada que impedía que el cuerpo se desplazara, pero tenía el problema de desplazarse hacia la parte superior. Esto debería resolver ambos problemas.

Como nota al margen, parece desbordamiento: oculto no funciona en el cuerpo para iOS Safari solo cuando iOS Chrome funciona bien.

var scrollPos = 0;

$(''.modal'')
    .on(''show.bs.modal'', function (){
        scrollPos = $(''body'').scrollTop();
        $(''body'').css({
            overflow: ''hidden'',
            position: ''fixed'',
            top : -scrollPos
        });
    })
    .on(''hide.bs.modal'', function (){
        $(''body'').css({
            overflow: '''',
            position: '''',
            top: ''''
        }).scrollTop(scrollPos);
    });

Answer 14

Prueba esto,

 body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

Answer 15

Sé que esto ha sido respondido, pero ninguna de estas soluciones funcionó para mí. Necesitaba tomar un enfoque diferente. Estoy usando PhoneGap y estoy compilando mi código de forma nativa, así que tuve que mover el fondo al cuerpo. Espero que esto ayude a alguien más. O si hay una manera más clara de hacerlo, no dude en comentar ...

$(document).on(''shown.bs.modal'', ''.modal'', function (e) {

    $("#" + e.target.id).find(".modal-backdrop").css("z-index", $("#" + e.target.id).css("z-index")).insertBefore("#" + e.target.id);

});

Answer 16

Si usas jQuery puedes hacer esto con scrollTop

1. Guarde la posición de desplazamiento vertical del cuerpo;
2. Deshabilita el desplazamiento en el cuerpo;
3. Mostrar modal;
4. Cerrar modal;
5. Volver a habilitar el desplazamiento en el cuerpo;
6. Establecer la posición de desplazamiento guardada.

#modal {
    bottom: 0;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0;
    width: 100%;
}

$(''.open-modal'').click(function (e) {
    e.preventDefault();
    $(''#modal'').toggle();
    scrollTo = $(''body'').scrollTop();
    $(''body'').css("position", "fixed");
});

$(''.close-modal'').click(function (e) {
    e.preventDefault();
    $(''#modal'').toggle();
    $(''body'').css("position", "static");
    $(''body'').animate({scrollTop: scrollTo}, 0);
});

Answer 17

Tuve un problema con esto también, iPhone + Safari donde era necesario agregar:

position: fixed;

Como se mencionó en otra parte, esto creó un problema de scroll-to-top. La solución que funcionó para mí fue capturar la posición hasta la cima al abrir modal, y luego animar a esa posición en el cierre modal

sobre modal abierto

scrollTo = $(''body'').scrollTop();
$(''body'').css("position", "fixed");

sobre cierre modal

$(''body'').css("position", "static");
$(''body'').animate({scrollTop: scrollTo}, 0);

Answer 18

Usar position:fixed tiene el efecto secundario de desplazar el cuerpo hacia arriba.

Si no mueve su cuerpo para desplazarse hacia la parte superior, TENGA EN CUENTA la position:fixed uso position:fixed . Simplemente deshabilite touchmove en el cuerpo si el modal está abierto. Nota: El modal en sí mismo aún puede desplazarse al tacto (si es más grande que la pantalla).

CSS:

body.modal-open {
    overflow: hidden;
    width: 100%;
    /* NO position:fixed here*/
}

JS:

$(''.modal'').on(''show.bs.modal'', function (ev) { // prevent body from scrolling when modal opens
    $(''body'').bind(''touchmove'', function(e){
        if (!$(e.target).parents().hasClass( ''.modal'' )){ //only prevent touch move if it is not the modal
            e.preventDefault()
        }
    })
})
$(''.modal'').on(''hide.bs.modal'', function (e) { //unbind the touchmove restrictions from body when modal closes
    $(''body'').unbind(''touchmove'');
})

EDITAR: Nota, para los modales muy pequeños, es posible que deba agregar la siguiente línea a su CSS:

.modal-dialog{
    height: 100%;
}

Answer 19

Vea aquí: https://github.com/twbs/bootstrap/issues/7501

Así que prueba:

$(''body'').css(''overflow'',''hidden'');
$(''body'').css(''position'',''fixed'');

V3.0.0. debería haber arreglado este problema ¿Usas la última versión? Si es así, publique un problema en https://github.com/twbs/bootstrap/

Answer 20

$(''.modal'') 
.on(''shown'', function(){ 
  console.log(''show''); 
  $(''body'').css({overflow: ''hidden''}); 
}) 
.on(''hidden'', function(){ 
  $(''body'').css({overflow: ''''}); 
}); 

usa este