Evitar que el CUERPO se desplace cuando se abre un modal

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

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

Tenga en cuenta que nuestro sitio web dejó de ser compatible con IE6, IE7+ debe ser compatible.

Author: xorinzor, 0000-00-00
Source

11 answers

Bootstrap's modal 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, 2013
Esto ha dejado de funcionar en Twitter Boostrap v. 2.3.0 they ya no añaden la clase modal-open a la cuerpo.

Una solución alternativa sería agregar la clase al cuerpo cuando el modal está a punto de mostrarse, y eliminarla cuando el modal está cerrado: 

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

Actualización 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-abierto en el cuerpo (para que podamos bombardear el pergamino allí)

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

 394
Author: MartinHN,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-25 07:24:46

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 lo haga.

Este CSS evitará que la página de fondo se desplace bajo el modal: 

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

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

Si conoce su viewport (mi complemento para agregar viewport a <body> ) simplemente puede agregar un conmutador css para 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 modales.

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

Esta respuesta es un x-post.

 90
Author: Brad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:17:55

Simplemente oculta el desbordamiento del cuerpo y hace que el cuerpo no se desplace. Cuando se oculta el modal, volverá a automático.

Aquí está el código:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})
 23
Author: Mehmet Fatih Yıldız,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-14 23:01:46

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

 19
Author: charlietfl,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-02 19:05:22

Advertencia: La siguiente opción no es relevante para Bootstrap v3.0.x, ya que el desplazamiento en esas versiones se ha limitado explícitamente al modal en sí. Si deshabilita los eventos de rueda, puede evitar inadvertidamente que algunos usuarios vean el contenido en los modales que tienen alturas mayores que la altura de la ventana.

Otra Opción: Eventos de Rueda

El evento scroll no se puede cancelar. Sin embargo, es posible cancelar el rueda del ratón y rueda eventos. La gran advertencia es que no todos los navegadores heredados los soportan, Mozilla solo recientemente agregó soporte para este último en Gecko 17.0. No conozco la extensión completa, pero IE6 + y Chrome los soportan.

Aquí está 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

 16
Author: merv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-16 20:00:48

Necesita ir más allá de la respuesta y cuenta de @charlietfl para las barras de desplazamiento, de lo contrario puede ver un reflujo de documento.

Abriendo el modal:

  1. Registre la anchura body
  2. Establecer body desbordamiento a hidden

  3. Establezca explícitamente el ancho del cuerpo a lo que era en el paso 1.

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

Cerrando el modal:

  1. Establecer body desbordamiento a auto

  2. Establecer body ancho a auto 

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

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

 12
Author: jpap,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-31 00:08:28 
/* =============================
 * 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(); });
});
 8
Author: jparkerweb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-22 22:38:12

Prueba este: 

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

Funcionó para mí. (soporta IE8)

 8
Author: fatCop,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-14 04:37:52

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 inténtalo de todos modos.

 6
Author: Anish Gupta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-02 19:26:21

No podía hacer que funcione en Chrome con solo cambiar CSS, porque no quería que la página se desplace de nuevo a 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);
});
 6
Author: tetsuo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-29 20:01:27

Agregar la clase 'is-modal-open' o modificar el estilo de la etiqueta body con javascript está bien y funcionará como se supone. Pero el problema que vamos a enfrentar es cuando el cuerpo se desborde: 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 de 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');
});
 4
Author: Jassim Abdul Latheef,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-28 08:06:53