Question

我创建了一个弹出窗口，它使页面变暗的背景颜色不会显示在整个页面上。它仅显示在页面的前100％中。如果向下滚动，页面将变回正常的div背景色。

我创造了一个小提琴来帮助说明我的意思。向下滚动并单击蓝色文本。这将使弹出窗口出现。然后，如果向上滚动，您将看到灰色背景颜色仅显示在第一个100％视口中，但随后向下滚动时返回白色。我希望整个页面在点击时变成灰色。

我的小提琴

我已将高度设置为100％，因此我不确定为什么它不会对整个页面产生任何影响。

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    z-index:1001;
    -moz-opacity: 0.3;
    opacity:.30;
    filter: alpha(opacity=30);
}

Answer 1

将展示位置更改为fixed，因为absolute会将其定位在文档的0, 0，height: 100%会给出它是视口高度的100％。位置fixed会将其修复为视口的0,0位置。

以下示例显示了位置absolute（红色）和位置fixed（蓝色）之间的区别：

＆＃13;

#push {
  height: 5000px;
}
#absolute, #fixed {
  background: rgba(255,0,0,.5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#fixed {
  position: fixed;
  background: rgba(0,0,255,.5);
}

＆＃13;

<div id="push"></div>
<div id="absolute"></div>
<div id="fixed"></div>

＆＃13;

Answer 2

检查一下 - https://jsfiddle.net/3x42sdd8/2/

刚刚更新的位置

.black_overlay{position:fixed;}

弹出不覆盖整个页面的背景颜色

2 个答案: