最简单的Div+ CSS弹出层效果 

<html>
<head>

<title>简单的Div+ CSS弹出层效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script language="javascript">
function ShowDiv(s)
    {
        if(s>0)
        {
            document.getElementById('ceng').style.display='block';
            document.getElementById('close').style.display='block';
        }else{
            document.getElementById('ceng').style.display='none';
            document.getElementById('close').style.display='none';
        }
    }
</script>
</head>

<body>

<a href="#" onclick="ShowDiv(1)">点击弹出</a>

<div id="ceng" style="position:absolute;z-index:2;left:0;top:0;right:0;background-color:#000;filter:alpha(opacity=50);margin:1px 1px;display:none;width:100%;height:100%;text-align:center;"> 
</div>

<div id="close" style="position:absolute !important;left:30%;top:0px;z-index:3;border:1px solid #ff6600;background-color:#fff;margin:100px auto;padding:0px;display:none;width:400px;height:300px;text-align:right">
<a href="#" onclick="ShowDiv(0)">关闭</a>

<div style="text-align:center;"><br>内容
<br> 哇哈哈哈</div>
</div>

</body>
</html>

　　效果如下:

posted @ 2011-07-22 17:47  为乐而来  阅读(6897)  评论(1)  编辑  收藏  举报