如何在引导模式打开时防止后台滚动

Question

我使用的是Bootstrap v3.0.2。希望在模式打开时禁用后台滚动。我试过了：

.modal-open {
  overflow: hidden;
}

但它不起作用。我发现这个问题的解决方案是：

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

但是position: fixed;在打开和关闭模态时，会在chrome（小于100%视图）的页面底部以及大型显示器（在100%视图）中造成额外的空白。如何摆脱它？（我的模态包含可滚动字段）

Answer 1

使用height: 100%使.modal-open适合整个屏幕。最终使用

top: 0;
left: 0;
right: 0;
bottom: 0;

Answer 2

如果任何人仍然有这种情况，只需使用

.modal-open {
    overflow: hidden !important;
}

编辑：不知道为什么它被否决了，但这就是解决我关于滚动的问题的原因。

Answer 3

我遇到了类似的问题，在我的情况下，解决方案只是更新弹出

$（'#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');

}

})；

Answer 4

也许其他人会觉得这很有帮助。对我来说，由于某种原因，模态背景（褪色的背景）和模态一起滚动。最后发现，复制这一点的唯一方法是在Macbook（mavericks/yosemite）内置屏幕上。若我将chrome（v44）窗口移动到其他显示器，当滚动模式时，背景淡入淡出将停止移动。