javascript - large - tamaño de ventana modal bootstrap

Evita que BODY se desplace cuando se abre un modal

Question

Quiero que mi cuerpo deje de desplazarse al usar la rueda del ratón mientras se abre el modal (de http://twitter.github.com/bootstrap ) en mi sitio web.

He intentado llamar a la pieza de javascript a continuación cuando se abre el modal pero sin éxito

$(window).scroll(function() { return false; });

AND

$(window).live(''scroll'', function() { return false; });

Por favor, tenga en cuenta que nuestro sitio web ha dejado de ser compatible con IE6, aunque IE7 + debe ser compatible.

Answer 1

Para Bootstrap , puedes intentar esto (trabajando en Firefox , Chrome y Microsoft Edge ):

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

Espero que esto ayude...

Answer 2

A partir de noviembre de 2017, Chrome presentó una nueva propiedad css.

overscroll-behavior: contain;

lo que resuelve este problema, aunque desde el momento de la escritura tiene un soporte de navegador cruzado limitado

Vea a continuación los enlaces para detalles completos y soporte de navegador.

• https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
• https://developers.google.com/web/updates/2017/11/overscroll-behavior

Answer 3

Acabo de hacerlo de esta manera ...

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

Pero cuando el control desapareció, movió todo a la derecha 20px, así que agregué

$(''body'').css(''margin-right'', ''20px'');

Justo después de eso.

Funciona para mi.

Answer 4

Agregar la clase ''es-modal-abierto'' o modificar el estilo de la etiqueta del cuerpo con javascript está bien y funcionará como se supone. Pero el problema que enfrentaremos es cuando el cuerpo se desborda: oculto, saltará a la parte superior (scrollTop se convertirá en 0). Esto se convertirá en un problema de usabilidad más adelante.

Como solución para este problema, en lugar de cambiar el desbordamiento de la etiqueta del cuerpo: oculto cámbielo en la etiqueta html

$(''#myModal'').on(''shown.bs.modal'', function () {
  $(''html'').css(''overflow'',''hidden'');
}).on(''hidden.bs.modal'', function() {
  $(''html'').css(''overflow'',''auto'');
});

Answer 5

Basado en este violín: http://jsfiddle.net/dh834zgw/1/

el siguiente fragmento (usando jquery) deshabilitará el desplazamiento de la ventana:

 var curScrollTop = $(window).scrollTop();
 $(''html'').toggleClass(''noscroll'').css(''top'', ''-'' + curScrollTop + ''px'');

Y en tu css:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

Ahora, cuando elimines el modal, no olvides eliminar la clase noscroll en la etiqueta html:

$(''html'').toggleClass(''noscroll'');

Answer 6

Debe ir más allá de la respuesta de @ charlietfl y tener en cuenta las barras de desplazamiento, de lo contrario puede ver un flujo de documentos.

Abriendo el modal:

1. Anota el ancho del body
2. Establecer body desbordamiento a hidden

3. Establezca explícitamente el ancho del cuerpo como estaba en el paso 1.

   var $body = $(document.body);
   var oldWidth = $body.innerWidth();
   $body.css("overflow", "hidden");
   $body.width(oldWidth);

Cerrando el modal:

1. Ajuste body desbordamiento del body a auto

2. Ajustar body ancho del body a auto

   var $body = $(document.body);
   $body.css("overflow", "auto");
   $body.width("auto");

Inspirado por: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

Answer 7

El modal de Bootstrap agrega automáticamente la clase modal-open al cuerpo cuando se muestra un diálogo modal y lo elimina cuando el diálogo está oculto. Por lo tanto, puede agregar lo siguiente a su CSS:

body.modal-open {
    overflow: hidden;
}

Podría argumentar que el código anterior pertenece a la base de código CSS de Bootstrap, pero esta es una solución fácil para agregarlo a su sitio.

Actualización 8 de febrero de 2013
Esto ahora ha dejado de funcionar en Twitter Boostrap v. 2.3.0 - ya no agregan la clase modal-open al cuerpo.

Una solución alternativa sería agregar la clase al cuerpo cuando el modal esté a punto de mostrarse y eliminarlo cuando se cierre el modal:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

Actualización del 11 de marzo de 2013 Parece que la clase modal-open regresará en Bootstrap 3.0, explícitamente con el propósito de evitar el desplazamiento:

Reintroduce .modal-open en el cuerpo (para que podamos disparar el rollo allí)

Vea esto: https://github.com/twitter/bootstrap/pull/6342 - mire la sección Modal .

Answer 8

Esta es la mejor solución para mí:

Css:

.modal {
     overflow-y: auto !important;
}

Y js

modalShown = function () {
    $(''body'').css(''overflow'', ''hidden'');
},

modalHidden = function () {
    $(''body'').css(''overflow'', ''auto'');
}

Answer 9

Esto funcionó para mí:

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});

Answer 10

Estoy usando esta función vanilla js para agregar una clase "modal-open" al cuerpo. (Basado en la respuesta de smhmic)

function freezeScroll(show, new_width)
{
    var innerWidth = window.innerWidth,
        clientWidth = document.documentElement.clientWidth,
        new_margin = ((show) ? (new_width + innerWidth - clientWidth) : new_width) + "px";

    document.body.style.marginRight = new_margin;
    document.body.className = (show) ? "modal-open" : "";
};

Answer 11

La mayoría de las piezas están aquí, pero no veo ninguna respuesta que lo ponga todo junto.

El problema es triple.

(1) evitar el desplazamiento de la página subyacente

$(''body'').css(''overflow'', ''hidden'')

(2) y quitar la barra de desplazamiento

var handler = function (e) { e.preventDefault() }
$(''.modal'').bind(''mousewheel touchmove'', handler)

(3) limpiar cuando se despide el modal

$(''.modal'').unbind(''mousewheel touchmove'', handler)
$(''body'').css(''overflow'', '''')

Si el modal no es de pantalla completa, aplique los enlaces .modal a una superposición de pantalla completa.

Answer 12

La mejor solución es la solución body{overflow:hidden} css-only body{overflow:hidden} utilizada por la mayoría de estas respuestas. Algunas respuestas proporcionan una solución que también evita el "salto" causado por la barra de desplazamiento que desaparece; Sin embargo, ninguno era demasiado elegante. Entonces, escribí estas dos funciones, y parecen funcionar bastante bien.

var $body = $(window.document.body);

function bodyFreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css(''overflow'', ''hidden'');
    $body.css(''marginRight'', ($body.css(''marginRight'') ? ''+='' : '''') + ($body.innerWidth() - bodyWidth))
}

function bodyUnfreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css(''marginRight'', ''-='' + (bodyWidth - $body.innerWidth()))
    $body.css(''overflow'', ''auto'');
}

Echa un vistazo a este jsFiddle para verlo en uso.

Answer 13

La respuesta aceptada no funciona en dispositivos móviles (iOS 7 con Safari 7, al menos) y no quiero que MOAR JavaScript se ejecute en mi sitio cuando CSS funcione.

Este CSS evitará que la página de fondo se desplace por debajo del modal:

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

Sin embargo, también tiene un ligero efecto secundario de desplazarse esencialmente hacia la parte superior. position:absolute resuelve esto pero, vuelve a introducir la capacidad de desplazamiento en el móvil.

Si conoce su ventana gráfica ( mi complemento para agregar la ventana gráfica al <body> ), simplemente puede agregar un conmutador css para la position .

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; 
}

También agrego esto para evitar que la página subyacente salte a la izquierda / derecha al mostrar / ocultar los modales.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

Esta respuesta es una x-post.

Answer 14

Lamentablemente ninguna de las respuestas anteriores solucionó mis problemas.

En mi situación, la página web originalmente tiene una barra de desplazamiento. Cuando hago clic en el modo modal, la barra de desplazamiento no desaparecerá y el encabezado se moverá hacia la derecha un poco.

Luego traté de agregar .modal-open{overflow:auto;} (lo que la mayoría de la gente recomienda). De hecho, solucionó los problemas: la barra de desplazamiento aparece después de abrir el modal. Sin embargo, surge otro efecto secundario que es que "el fondo debajo del encabezado se moverá un poco hacia la izquierda, junto con otra barra larga detrás del modal"

Por suerte, después de agregar {padding-right: 0 !important;} , todo está arreglado perfectamente. Tanto el encabezado como el fondo del cuerpo no se movieron y el modal aún mantiene la barra de desplazamiento.

Espero que esto pueda ayudar a aquellos que todavía están atrapados con este problema. ¡Buena suerte!

Answer 15

Mi solución para Bootstrap 3:

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

porque para mí el único overflow: hidden en la clase body.modal-open no impidió que la página se desplace hacia la izquierda debido al margin-right: 15px original margin-right: 15px .

Answer 16

Muchos sugieren "desbordamiento: oculto" en el cuerpo, que no funcionará (al menos no en mi caso), ya que hará que el sitio web se desplace hacia la parte superior.

Esta es la solución que me funciona (tanto en teléfonos móviles como en computadoras), usando jQuery:

    $(''.yourModalDiv'').bind(''mouseenter touchstart'', function(e) {
        var current = $(window).scrollTop();
        $(window).scroll(function(event) {
            $(window).scrollTop(current);
        });
    });
    $(''.yourModalDiv'').bind(''mouseleave touchend'', function(e) {
        $(window).off(''scroll'');
    });

Esto hará que el desplazamiento del modo modal funcione, y evitará que el sitio web se desplace al mismo tiempo.

Answer 17

No estoy 100% seguro de que esto funcione con Bootstrap, pero vale la pena intentarlo; funcionó con Remodal.js, que se puede encontrar en github: http://vodkabears.github.io/remodal/ y tendría sentido para los métodos ser bastante similar

Para evitar que la página salte a la parte superior y también evitar el cambio correcto de contenido, agregue una clase al body cuando se active el modal y establezca estas reglas CSS:

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

Es la position:static y la height:auto que se combinan para detener el salto de contenido a la derecha. El overflow-y:hidden; evita que la página se desplace detrás del modal.

Answer 18

No estoy seguro de este código, pero vale la pena intentarlo.

En jQuery:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

Como dije antes, no estoy 100% seguro, pero lo intento de todos modos.

Answer 19

No se pudo hacer que funcione en Chrome simplemente cambiando CSS, porque no quería que la página se desplace hacia la parte superior. Esto funcionó bien:

$("#myModal").on("show.bs.modal", function () {
  var top = $("body").scrollTop(); $("body").css(''position'',''fixed'').css(''overflow'',''hidden'').css(''top'',-top).css(''width'',''100%'').css(''height'',top+5000);
}).on("hide.bs.modal", function () {
  var top = $("body").position().top; $("body").css(''position'',''relative'').css(''overflow'',''auto'').css(''top'',0).scrollTop(-top);
});

Answer 20

Ocultar el desbordamiento y fijar la posición hace el truco, pero con mi diseño fluido lo arreglaría más allá del ancho del navegador, por lo que un ancho: 100% fijo.

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

Answer 21

Para aquellos que se preguntan cómo obtener el evento scroll para el modo bootstrap 3:

$(".modal").scroll(function() {
    console.log("scrolling!);
});

Answer 22

Podría usar la siguiente lógica, la probé y funciona (incluso en IE)

   <html>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
}


$(function(){

        $(''#locker'').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).bind(''scroll'',lockscroll);

        })  


        $(''#unlocker'').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).unbind(''scroll'');

        })
})

</script>

<div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

Answer 23

Puede intentar configurar el tamaño del cuerpo al tamaño de la ventana con desbordamiento: oculto cuando el modal está abierto

Answer 24

Si los modales son 100% de altura / ancho, "mouseenter / leave" funcionará para habilitar / deshabilitar fácilmente el desplazamiento. Esto realmente funcionó para mí:

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
} 
$("#myModal").mouseenter(function(){
    currentScroll=$(window).scrollTop();
    $(window).bind(''scroll'',lockscroll); 
}).mouseleave(function(){
    currentScroll=$(window).scrollTop();
    $(window).unbind(''scroll'',lockscroll); 
});

Answer 25

Simplemente oculta el cuerpo desbordado y hace que el cuerpo no se desplace. Cuando oculte el modal, revertirlo a automático.

Aquí está el código:

$(''#adminModal'').modal().on(''shown'', function(){
    $(''body'').css(''overflow'', ''hidden'');
}).on(''hidden'', function(){
    $(''body'').css(''overflow'', ''auto'');
})

Answer 26

Tuve una barra lateral que fue generada por la casilla de verificación hack. Pero la idea principal es guardar el documento scrollTop y no cambiarlo durante el desplazamiento de la ventana.

Simplemente no me gustó la página saltando cuando el cuerpo se ''desborda: oculto''.

window.addEventListener(''load'', function() {
    let prevScrollTop = 0;
    let isSidebarVisible = false;

    document.getElementById(''f-overlay-chkbx'').addEventListener(''change'', (event) => {
        
        prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        isSidebarVisible = event.target.checked;

        window.addEventListener(''scroll'', (event) => {
            if (isSidebarVisible) {
                window.scrollTo(0, prevScrollTop);
            }
        });
    })

});

Answer 27

trabajó para mi

$(''#myModal'').on({''mousewheel'': function(e) 
    {
    if (e.target.id == ''el'') return;
    e.preventDefault();
    e.stopPropagation();
   }
});

Answer 28

Advertencia: la opción a continuación no es relevante para Bootstrap v3.0.x, ya que el desplazamiento en esas versiones se ha limitado explícitamente al modal mismo. Si desactiva los eventos de la rueda, puede evitar inadvertidamente que algunos usuarios vean el contenido en modos que tienen alturas superiores a la altura de la ventana gráfica.

Otra opción más: eventos de ruedas

El evento scroll no es cancelable. Sin embargo, es posible cancelar los eventos de wheel y wheel mousewheel . La gran advertencia es que no todos los navegadores heredados los admiten, Mozilla solo recientemente agregó soporte para este último en Gecko 17.0. No sé la propagación completa, pero IE6 + y Chrome sí los admiten.

Aquí es cómo aprovecharlos:

$(''#myModal'')
  .on(''shown'', function () {
    $(''body'').on(''wheel.modal mousewheel.modal'', function () {
      return false;
    });
  })
  .on(''hidden'', function () {
    $(''body'').off(''wheel.modal mousewheel.modal'');
  });

JSFiddle

Answer 29

Prueba este:

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

funciono para mi (soporta IE8)

Answer 30

/* =============================
 * Disable / Enable Page Scroll
 * when Bootstrap Modals are
 * shown / hidden
 * ============================= */

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function theMouseWheel(e) {
  preventDefault(e);
}

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener(''DOMMouseScroll'', theMouseWheel, false);
  }
  window.onmousewheel = document.onmousewheel = theMouseWheel;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener(''DOMMouseScroll'', theMouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = null;  
}

$(function () {
  // disable page scrolling when modal is shown
  $(".modal").on(''show'', function () { disable_scroll(); });
  // enable page scrolling when modal is hidden
  $(".modal").on(''hide'', function () { enable_scroll(); });
});