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

我创建了一个弹出窗口及其背景颜色，使页面变暗不会显示在整个页面上。它只显示在页面的前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); 
}

来源

2015-09-25 Ralph

'HTML，身体{高度：100％; }' – somethinghere

对不起。我已经在我的文件中。但我忘了将其添加到它。 – Ralph

另外，由于绝对位置将它定位在文档的0,0处，因此您的位置比'fixed'更好，而100％高度表示它具有_viewport_的高度。添加'position：fixed'并且它应该可以工作。 – somethinghere

更改位置fixed您的叠加，为absolute将在您文件同时的0, 0它定位height: 100%给它100％的高度视口。位置fixed将其修复到您的视口的位置0,0。

这里是您显示位置absolute（红色）和位置fixed（蓝色）之间的差异的例子：

#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); 
 
}

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

来源

2015-09-25 15:51:03 somethinghere

这工作在我的小提琴，但不是我的实际页面。 – Ralph

我只能修理你的小提琴，而不是你的实际页面 - 必须有别的东西，但我不知道是什么原因，因为位置固定的元素（和两个定位值集合）总是固定在视口上，你可以请参阅片段。 – somethinghere

没关系，它的工作原理。我试图改变我的媒体查询'black_overlay'。谢谢你的伟大答案。 – Ralph

检查了这一点 - https://jsfiddle.net/3x42sdd8/2/

刚刚更新位置

.black_overlay{position:fixed;}

来源

2015-09-25 15:50:01 Ranjana

嗨，欢迎来到堆栈溢出 - 您可以扩展一下_why_这是事实，否则您的答案对于稍后阅读这些内容并且没有具体实现的人来说不是很有帮助。 – somethinghere

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

回答

相关问题