Javascript 覆盖位置和屏幕中间的淡入淡出
我想要一个非常简单的方法来淡出背景中的所有内容，当我打开我的模式。目前的问题是让CSS知道站点有多大 如果我使用“100%”的值，它将只使用窗口高度的大小，而不是网站的高度 为了说明我的问题，我制作了一把小提琴，可以找到。单击按钮，然后向下滚动将显示我的意思；-） 代码如下所示：Javascript 覆盖位置和屏幕中间的淡入淡出,javascript,css,overlay,Javascript,Css,Overlay,我想要一个非常简单的方法来淡出背景中的所有内容，当我打开我的模式。目前的问题是让CSS知道站点有多大 如果我使用“100%”的值，它将只使用窗口高度的大小，而不是网站的高度 为了说明我的问题，我制作了一把小提琴，可以找到。单击按钮，然后向下滚动将显示我的意思；-） 代码如下所示： <html> <head> <style> #overlay { display: none; position: absolute; left: 2
<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>
#覆盖层{
显示：无；
位置：绝对位置；
左：222px；
最高：5%；
填充：25px；
边框：2件纯黑；
背景色：#ffffff；
宽度：455px；
高度：437px；
z指数：100；
}
#褪色{
显示：无；
位置：绝对位置；
左：0%；
最高：0%；
背景色：黑色；
-moz不透明度：0.7；
不透明度：.70；
过滤器：α（不透明度=70）；
宽度：100%；
身高：100%；
z指数：90；
}
布卢布
显示模态
下面是一些Div覆盖的内容
Lorem Ipsum
隐藏模态
如果我可以详细说明一下这个问题的话：有没有一种方法可以将覆盖层放置在当前视图的中心？我在iframe中显示模态，因为主要内容显示在那里。我知道如何防止用户在iframe中滚动，但我如何将模式放在用户正在查看的位置，而不是从顶部开始的固定百分比或固定数量的像素？要锁定背景，而不让覆盖层滚动到屏幕外，请将其位置设置为“固定”。背景仍将向后滚动以覆盖，但仍将灰显且不可选择
同样，您可以使用位置：固定；以确保模态始终位于可见屏幕的中心。位置：固定；将允许您使用相对于可见屏幕的元素，并且不受页面其余部分的流的影响。身高：100%；在这种情况下，无论页面位置如何，始终表示100%的可见窗口。在这里，无需定义模式维度：