twitter-bootstrap 引导模式打开时如何防止背景滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28524718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent background scroll when bootstrap modal is open
提问by fatCop
I'm using Bootstrap v3.0.2. Want to disable background scrolling when a modal is open. I tried:
我正在使用Bootstrap v3.0.2。想要在模式打开时禁用背景滚动。我试过：
.modal-open {
overflow: hidden;
}
But it isn't working. I found a solution to this problem is:
但它不起作用。我发现这个问题的解决方案是：
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}
But position: fixed;causing an extra white-space at the bottom of the page in chrome(less than 100% view) and also for large displays(in 100% view) while opening and closing the modal. How to get rid of it? (My modal contains scroll-able fields)
但是position: fixed;在打开和关闭模态时，会在 chrome 页面底部（小于 100% 视图）以及大型显示器（在 100% 视图中）导致额外的空白。如何摆脱它？（我的模态包含可滚动的字段）
采纳答案by QUB3X
Use height: 100%to make the .modal-openfit the whole screen.
Eventually use
使用height: 100%使.modal-open适应整个屏幕。最终使用
top: 0;
left: 0;
right: 0;
bottom: 0;
回答by ctf0
incase anyone having this still, just use
以防万一有人仍然拥有这个，只需使用
.modal-open {
overflow: hidden !important;
}
EDIT:have no idea why its de-voted but this is what fixed my issue regarding the scrolling.
编辑：不知道为什么它被投了票，但这就是解决我关于滚动的问题的原因。
回答by sukinsan
I had a similar problem, in my case solution was just to update popup
我有一个类似的问题，就我而言，解决方案只是更新弹出窗口
$('#modalWindow').modal('handleUpdate');
$('#modalWindow').modal('handleUpdate');
My workflow
我的工作流程
$('#modalWindow').modal();
$.ajax({
....
success: function(html){
$("#modalWindowContent").html(html); // great, but height of popup window was changed, let's update it $('#modalWindow').modal('handleUpdate');}
});
$('#modalWindow').modal();
$.ajax({
....
成功：功能（html）{
$("#modalWindowContent").html(html); // great, but height of popup window was changed, let's update it $('#modalWindow').modal('handleUpdate');}
});
回答by Sim
Maybe somebody else will find it helpful. For me for some reason modal-backdrop(faded background) was scrolling together with modal. Finally found that the only way to reproduce this was on Macbook(mavericks/yosemite) built-in screen. If I would move chrome(v44) window to other monitor, background fade would stop moving when scrolling modal.
也许其他人会发现它有帮助。对我来说，由于某种原因，模态背景（褪色背景）与模态一起滚动。终于发现重现这个的唯一方法是在 Macbook（小牛/优胜美地）内置屏幕上。如果我将 chrome(v44) 窗口移动到其他显示器，滚动模式时背景淡入淡出将停止移动。
