简单弹出遮障层实例

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>

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>

Demo:https://files.cnblogs.com/huangweiwei/OverlayLayer2.rar

posted @ 2012-05-28 14:31 黄伟伟(huangweiwei) 阅读(1389) 评论(0) 收藏举报

刷新页面返回顶部

简单弹出遮障层实例

公告