Solución:
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 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 Bootstrap v. 2.3.0; ya no agregan el modal-open clase 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 11 de marzo de 2013
Parece el modal-open La clase regresará en Bootstrap 3.0, explícitamente con el propósito de prevenir el desplazamiento:
Reintroduce .modal-open en el cuerpo (para que podamos nuclear el pergamino allí)
Vea esto: https://github.com/twitter/bootstrap/pull/6342 – mire el Modal sección.
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 hará.
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 secundario de esencialmente desplazarse hacia la parte superior. position:absolute resuelve esto, pero vuelve a introducir la capacidad de desplazarse en el móvil.
Si conoce su ventana gráfica (mi complemento para agregar ventana gráfica a la <body>) puede agregar un conmutador CSS para el 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 de izquierda a derecha al mostrar / ocultar modales.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
esta respuesta es una publicación x.
Simplemente oculte el desbordamiento del cuerpo y hará que el cuerpo no se desplace. Cuando oculte el modal, conviértalo en automático.
Aquí está el código:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})