找到你要的答案

Q:Prevent BODY from scrolling when a modal is opened

Q:当模态打开时,防止身体滚动

I want my body to stop scrolling when using the mousewheel while the Modal (from http://twitter.github.com/bootstrap) on my website is opened.

I've tried to call the piece of javascript below when the modal is opened but without success

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

AND

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

Please note our website dropped support for IE6, IE7+ needs to be compatible though.

我想让我的身体停止滚动时,用鼠标滚轮在模态(从http://twitter.github.com/bootstrap)在我的网站上打开。

我试图调用JavaScript在一块的时候,模态打开但没有成功

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

AND

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

请注意我们的网站的下降支持IE6,IE7 +需要兼容虽然。

answer1: 回答1:

Bootstrap's modal automatically adds the class modal-open to the body when a modal dialog is shown and removes it when the dialog is hidden. You can therefore add the following to your CSS:

body.modal-open {
    overflow: hidden;
}

You could argue that the above code belongs to the Bootstrap CSS code base, but this is an easy fix to add it to your site.

Update 8th feb, 2013
This has now stopped working in Twitter Boostrap v. 2.3.0 -- they no longer add the modal-open class to the body.

A workaround would be to add the class to the body when the modal is about to be shown, and remove it when the modal is closed:

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

Update 11th march, 2013 Looks like the modal-open class will return in Bootstrap 3.0, explicitly for the purpose of preventing the scroll:

Reintroduces .modal-open on the body (so we can nuke the scroll there)

See this: https://github.com/twitter/bootstrap/pull/6342 - look at the Modal section.

引导的模态自动添加类模态打开时,显示一个模态对话框,并删除它时,对话框是隐藏的。因此你可以在你的CSS:

body.modal-open {
    overflow: hidden;
}

你可能会说,上面的代码属于Bootstrap CSS代码库,但这是添加到您的网站容易修复。

Update 8th feb, 2013
This has now stopped working in Twitter Boostrap v. 2.3.0 -- they no longer add the modal-open class to the body.

一种解决方法会给身体添加类当模态即将显现,并把它当模态是封闭的:

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

Update 11th march, 2013 Looks like the modal-open class will return in Bootstrap 3.0, explicitly for the purpose of preventing the scroll:

重新开放。对机体模态(所以我们可以核滚动出现)

看到这https://github.com/twitter/bootstrap/pull/6342看看模态部分。

answer2: 回答2:

The accepted answer doesn't work on mobile (iOS 7 w/ Safari 7, at least) and I don't want MOAR JavaScript running on my site when CSS will do.

This CSS will prevent the background page from scrolling under the modal:

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

However, it also has a slight side-affect of essentially scrolling to the top. position:absolute resolves this but, re-introduces the ability to scroll on mobile.

If you know your viewport (my plugin for adding viewport to the <body>) you can just add a css toggle for the 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; 
}

I also add this to prevent the underlying page from jumping left/right when showing/hiding modals.

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

this answer is a x-post.

接受的答案不工作的手机(iOS 7 W / Safari 7,至少),我不想在我的网站上的JavaScript运行MOAR当CSS会做。

这将防止CSS背景页面滚动下的模态:

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

然而,它也有轻微的侧面影响基本上滚动到顶部。位置:绝对解决这一点,但,重新介绍了在移动滚动的能力。

如果你知道你的视口(我添加视口的<;body>;插件)你可以添加一个CSS切换位置。

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 {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

这个答案是一个x-post。

answer3: 回答3:

You could try setting body size to window size with overflow: hidden when modal is open

您可以尝试设置体大小窗口大小溢出:隐藏时,模态是开放的

answer4: 回答4:

Simply hide the body overflow and it makes body not scrolling. When you hide the modal, revert it to automatic.

Here is the code:

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

只需隐藏身体溢出,它使身体不滚动。当您隐藏模态时,将其还原为自动。

这里是代码:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})
javascript  jquery  scroll  twitter-bootstrap