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

我有类似的问题，在我的情况下，解决方案只是更新弹出窗口

$（＆＃39;＃modalWindow＆＃39）的模态。（＆＃39; handleUpdate＆＃39）;

我的工作流程

$（＆＃39;＃modalWindow＆＃39）的模态（）;

$。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）窗口移动到其他显示器，滚动模式时背景淡入将停止移动。

如何在bootstrap模式打开时阻止背景滚动

4 个答案: