如何防止在bootstrap模式打开时的背景滚动 [英] How to prevent background scroll when bootstrap modal is open

问题描述

我使用的是 Bootstrap v3.0.2 。想要在模式打开时禁用背景滚动。我试过：

I'm using Bootstrap v3.0.2. Want to disable background scrolling when a modal is open. I tried:

.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%;
}

但 position：fixed; 在打开和关闭模态时，在Chrome的页面底部（小于100％视图）和大型显示（在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)

推荐答案

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

Use height: 100% to make the .modal-open fit the whole screen. Eventually use

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

这篇关于如何防止在bootstrap模式打开时的背景滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！