我想要一个非常简单的方法来在我打开模式时淡出背景中的所有内容。当前的问题是让 CSS 知道站点有多大。
如果我使用“100%”的值，它只会使用窗口高度的大小而不是网站的高度。
为了说明我的问题，我创建了一个可以找到的 fiddle here .单击按钮然后向下滚动将显示我的意思；-)
代码如下所示:
<html>
<head>
<style>
#overlay {
display: none;
position: absolute;
left: 222px;
top: 5%;
padding: 25px;
border: 2px solid black;
background-color: #ffffff;
width: 455px;
height: 437px;
z-index: 100;
}
#fade {
display: none;
position: absolute;
left: 0%;
top: 0%;
background-color: black;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
width: 100%;
height: 100%;
z-index: 90;
}
</style>
</head>
<body>
<table style="width: 90%; height: 110%; border-style: solid; border-width: 1pt; border- color: black;">
<tr>
<td>blubb</td>
</tr>
</table>
<button onclick="document.getElementById('overlay').style.display = 'block'; document.getElementById('fade').style.display = 'block'; ">show modal</button>
<div id="overlay">
Here is some content for the Div Overlay!<br />
Lorem Ipsum<br />
<button onclick="document.getElementById('overlay').style.display ='none'; document.getElementById('fade').style.display = 'none'; ">hide modal</button>
</div>
<div id="fade"></div>
</body>
</html>
如果我可以详细说明这个问题:有没有办法将叠加层放置在当前 View 的中心？我在 iframe 中显示模式，因为主要内容显示在那里。我知道如何防止用户在 iframe 中滚动，但如何将模式放在用户正在查看的位置，而不是从顶部开始固定百分比或固定数量的像素？
最佳答案
要锁定背景并且不让叠加层滚出屏幕，请将其位置设置为固定。背景将仍然向后滚动以覆盖，但它仍然会变灰且无法选择。
同样你可以使用 position: fixed;以确保您的模态保持在可见屏幕的中心。位置:固定；将允许您使用与可见屏幕相关的元素，并且不受页面其余部分的影响。高度:100%；在这种情况下，无论页面位置如何，始终意味着 100% 的可见窗口。
关于javascript - 在屏幕中间叠加位置和淡入淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18191830/