关于遮罩层

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>遮罩层</title>

    <script src="jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $("#000").click(function() {
                Mask();
            });
            $("#111").click(function() {
                RemoveMask();
            });
        });

        function Mask() {
            //背景层(大小与object有效区域相同,即当弹出对话框时,背景显示为放射状透明灰色)
            var bgObj = document.createElement("div"); //创建一个div对象(背景层)
            //定义div属性,即相当于
            //<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div>
            bgObj.setAttribute('id', 'bgDiv');
            bgObj.style.position = "absolute";
            bgObj.style.top = "0";
            bgObj.style.background = "#777";
            bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
            bgObj.style.opacity = "0.6";
            bgObj.style.left = "0";
            bgObj.style.width = "800px";
            bgObj.style.height = "800px";
            bgObj.style.zIndex = "10000";
            $("#qbgDiv").append(bgObj);//加入某个object
            $("#qbgDiv").append("<div id=\"loading\" style=\"border:1px solid #93D691;position:relative; width:120px; height:80px; background-color:White; z-index:10001;text-align:center; padding:15px; margin:38%;position:absolute;\"><img src=\"http://img.9588.com/Images/coopeLoading.gif\" /><br /><br /><div>正在查询...</div></div>");
        }
        function RemoveMask() {
            $("#bgDiv").remove();
            $("#loading").remove();
        }
    </script>

</head>
<body>
    <input id="000" type="button" value="灰色" />
    <input id="111" type="button" value="close" />
    <div id="qbgDiv" style="width: 800px; height: 800px; background-color: Green; position: absolute;">
        dd
    </div>
</body>
</html>

posted @ 2011-09-20 15:05  _北北  阅读(309)  评论(3编辑  收藏  举报