屏幕中间的重叠位置和淡入淡出

Question

当我打开模态时，我想要一种非常简单的方法来淡化背景中的所有内容。 当前的问题是让CSS知道站点的大小。

如果我使用“ 100％”的值，它将仅使用窗口高度的大小而不是网站的高度。

为了说明我的问题，我创建了一个小提琴，可以在这里找到。 单击按钮，然后向下滚动将向您显示我的意思;-)

代码如下：

<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>

如果我可以详细说明这个问题：是否可以将叠加层放置在当前视图的中心？ 我在iframe中显示模态，因为其中显示了主要内容。 我知道如何防止用户在iframe中滚动，但是如何将模式放在用户所要查看的位置，而不是从顶部开始的固定百分比或固定数量的像素？

Answer 1

要锁定背景并且不让覆盖滚动离开屏幕，请将其位置设置为固定。 背景仍会向后滚动以覆盖，但背景仍将变灰且无法选择。

同样，您可以使用position：fixed; 以确保您的模式保持在可见屏幕的中心。 位置：固定； 将允许您使用与可见屏幕相关的元素，并且不受页面其余部分的影响。 高度：100％; 在这种情况下，无论页面位置如何，都将始终意味着可见窗口的100％。

屏幕中间的重叠位置和淡入淡出

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-08-12 16:31:46

屏幕中间的重叠位置和淡入淡出

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-08-12 16:31:46

解决方案1
1 已采纳 2013-08-12 16:31:46