<!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; 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; 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=" 800px; height: 800px; background-color: Green; position: absolute;">
dd
</div>
</body>
</html>