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

Question

I want a very simple way to fade all content in background when I open my modal. 当我打开模态时，我想要一种非常简单的方法来淡化背景中的所有内容。 The current problem is to let the CSS know how big the site is. 当前的问题是让CSS知道站点的大小。

If I use a value of "100%", it will only use the size of the window height instead of the height of the website. 如果我使用“ 100％”的值，它将仅使用窗口高度的大小而不是网站的高度。

To illustrate my problem, I created a fiddle which can be found here . 为了说明我的问题，我创建了一个小提琴，可以在这里找到。 Clicking the button and then scrolling down will show you what I mean ;-) 单击按钮，然后向下滚动将向您显示我的意思;-)

The code looks like this: 代码如下：

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

And if I may elaborate a bit on this question: Is there a way to posit the overlay in the center of the current view? 如果我可以详细说明这个问题：是否可以将叠加层放置在当前视图的中心？ I'm showing the modal in an iframe because the main content is shown there. 我在iframe中显示模态，因为其中显示了主要内容。 I know how to prevent the user from scrolling in the iframe, but how do I put the modal right there where the user is looking instead of a fixed percentage or fixed amount of pixels from the top? 我知道如何防止用户在iframe中滚动，但是如何将模式放在用户所要查看的位置，而不是从顶部开始的固定百分比或固定数量的像素？

Answer 1

To lock the background and not have your overlay scroll off of the screen, set it's position to fixed. 要锁定背景并且不让覆盖滚动离开屏幕，请将其位置设置为固定。 the background will scroll still behind to overlay, but it will still be greyed out and unselectable. 背景仍会向后滚动以覆盖，但背景仍将变灰且无法选择。

Likewise you may use position: fixed; 同样，您可以使用position：fixed; to ensure your modal stays centered on the visible screen. 以确保您的模式保持在可见屏幕的中心。 Position: fixed; 位置：固定； will allow you to work with elements relative to the visible screen and outside the influence of the flow of the rest of the page. 将允许您使用与可见屏幕相关的元素，并且不受页面其余部分的影响。 Height: 100%; 高度：100％; in this scenario will always mean 100% of the visible window, regardless of page location. 在这种情况下，无论页面位置如何，都将始终意味着可见窗口的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