简单弹出层示例

简单弹出层示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.4.2min.js"></script>
    <style>
        #bg {
            filter:alpha(opacity = 50);
            opacity:0.5;
            background-color:ActiveBorder;
            position:absolute;
            100%;
            height:100%;
            left:0;
            top:0;
            right:0;
            bottom:0;
            z-index:99;
            display:none;
        }
        #popup_box {
            position:absolute;
            left:50%;
            top:50%;
            400px;
            height:100px;
            z-index:100;
            background-color:#fff;
            border:1px #8FA4F5 solid;
            padding:1px;
            display:none;
        }
    </style>
</head>
<body>
    <script>
        $(document).ready(function () {
            $("#popup_box").css({marginTop:-200, marginLeft:-200,});
        });
        function popupTest(tag) {
            if (tag == 0) {
                $("#popup_box").hide();
                $("#bg").hide();
            }
            else {
                $("#popup_box").show();
                $("#bg").show();
            }
        }
    </script>
    <div >背景层,通过设置它的z-index属性比当前页大,达到覆盖效果并设置高宽和当前页的一样,再加上设置透明度,并且使用绝对定位
    </div>
     <div >显示层,也是设置它的z-index比背景层大,同样使用绝对定位。
        <div >
            <div><a href="#" onclick="popupTest(0); return false;"><span >关闭</span></a></div>
        </div>
        <div >
            <div >第一个弹出层测试</div>
        </div>
    </div>
    <div style="vertical-align:middle;"><center><a href="#" onclick="popupTest(1); return false;">第一个弹出层</a></center></div>
</body>
</html>

简单弹出层示例

简单弹出层示例