0

当我打开我的模式时，我想要一种非常简单的方法来淡化背景中的所有内容。当前的问题是让 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 中滚动，但是如何将模式放在用户正在查看的位置，而不是从顶部固定百分比或固定数量的像素？

4

1 回答 1

1

要锁定背景并且不让覆盖滚动出屏幕，请将其位置设置为固定。背景仍将滚动到后面以覆盖，但它仍将显示为灰色且无法选择。

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

于 2013-08-12T16:31:46.113 回答