1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title>无标题页</title>
5 <style type="text/css">
6 .overlay
7 {
8 display:none;
9 position:absolute;
10 top:0;
11 left:0;
12 width:100%;
13 background:#ffffff;
14 z-index:990;
15 filter:alpha(opacity=50);
16 opacity:0.5;
17 }
18 .div1
19 {
20 width:100%;
21 height:1500px;
22 background:#c8dcfa;
23 }
24 </style>
25 <script type="text/javascript">
26 function OpenLayer(id)
27 {
28 var lay = document.getElementById(id);
29 lay.style.height=document.body.scrollHeight+"px";
30 lay.style.display="block";
31 }
32 </script>
33
34 </head>
35 <body>
36 <div id="layer" class="overlay">
37 </div>
38
39 <div class="div1">
40 <input type="button" value="点击弹出层" onclick="OpenLayer('layer')" />
41 </div>
42
43 </body>
44 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title>无标题页</title>
5 <style type="text/css">
6 .overlay
7 {
8 display:none;
9 position:absolute;
10 top:0;
11 left:0;
12 width:100%;
13 background:#ffffff;
14 z-index:990;
15 filter:alpha(opacity=50);
16 opacity:0.5;
17 }
18 .div1
19 {
20 width:100%;
21 height:1500px;
22 background:#c8dcfa;
23 }
24 </style>
25 <script type="text/javascript">
26 function OpenLayer(id)
27 {
28 var lay = document.getElementById(id);
29 lay.style.height=document.body.scrollHeight+"px";
30 lay.style.display="block";
31 }
32 </script>
33
34 </head>
35 <body>
36 <div id="layer" class="overlay">
37 </div>
38
39 <div class="div1">
40 <input type="button" value="点击弹出层" onclick="OpenLayer('layer')" />
41 </div>
42
43 </body>
44 </html>
js方式实现:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
.overlay
{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
background:#ffffff;
z-index:990;
filter:alpha(opacity=50);
opacity:0.5;
}
.div1
{
width:100%;
height:1500px;
background:#c8dcfa;
}
</style>
<script type="text/javascript">
var layer;
function OpenLayer()
{
if(!layer)
{
layer = document.createElement("div");
layer.className="overlay";
document.body.appendChild(layer);
}
layer.style.height=document.body.scrollHeight+"px";
layer.style.display="block";
}
</script>
</head>
<body>
<div class="div1">
<input type="button" value="点击弹出层" onclick="OpenLayer()" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
.overlay
{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
background:#ffffff;
z-index:990;
filter:alpha(opacity=50);
opacity:0.5;
}
.div1
{
width:100%;
height:1500px;
background:#c8dcfa;
}
</style>
<script type="text/javascript">
var layer;
function OpenLayer()
{
if(!layer)
{
layer = document.createElement("div");
layer.className="overlay";
document.body.appendChild(layer);
}
layer.style.height=document.body.scrollHeight+"px";
layer.style.display="block";
}
</script>
</head>
<body>
<div class="div1">
<input type="button" value="点击弹出层" onclick="OpenLayer()" />
</div>
</body>
</html>
Demo:https://files.cnblogs.com/huangweiwei/OverlayLayer2.rar