Question

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

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

为了说明我的问题，我创造了一个可以找到的小提琴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>

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

Answer 1

要锁定背景并且不要将覆盖图滚动到屏幕之外，请将其位置设置为固定。背景将仍然在后面滚动以覆盖，但它仍然会变灰并且无法选择。

同样你可以使用position：fixed;确保您的模态保持在可见屏幕的中心位置。位置：固定;将允许您使用相对于可见屏幕的元素以及页面其余部分流动的影响。身高：100％;在这种情况下，无论页面位置如何，总是意味着100％的可见窗口。

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

1 个答案: