JS生成遮罩层

<script language="javascript">


// 页面加载时遮罩提示
document.write('<div id="loading" style="width: 100%; text-align:center; vertical-align: middle; height: 100%; background-color:#D4D0C8; filter:alpha(opacity=50); z-index:100; position:absolute;">' 
            + '<iframe src="" style="position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:-1; filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);" frameborder="0"></iframe></div>');

document.write('<div id="loadingText" style="width: 200px; background-color: #fff; padding: 15px; border: 3px solid #9FC3EA; text-align:center; margin-left:40%; margin-top: 10%; height: 20px; z-index:101; position:absolute;">页面正在加载，请稍候……</div>');

function removeLoading() {
    var objDiv = document.getElementById("loading");
    var objText = document.getElementById("loadingText");
    objDiv.parentNode.removeChild(objDiv);
    objText.parentNode.removeChild(objText);
}

</script>

------------------------------------

以上方案使用document.write()方法，适用于页面开始加载时，就先产生遮罩层（也就是说document.write()一定要写在前面），加载完成后，再将其去掉，当需要在页面上点击某个按钮之后，再产生遮罩层的时候，上面的方案就不适用了，因为document.write()方法，会把整个html页面给冲掉，覆盖了本向的页面内容；同时，以上的方案不兼容对IE6， 以下为改造后的写法 (使用了document.body.appendChild()方法)：

     // 显示遮罩层
function showDivLayer() {
//与IE6不兼容
    //var divObj1 = document.createElement('<div id="loading" style="width: 100%; text-align:center; vertical-align: middle; height: 100%; background-color:#D4D0C8; filter:alpha(opacity=20); z-index:100; position:absolute;top:0px; left:0px;">' 
//           + '<iframe src="" style="position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:-1; filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0.5);" frameborder="0"></iframe></div>');

//var divObj2 = document.createElement('<div id="loadingImg" style="text-align:center; margin-left:30%; margin-top: 18%; height: 20px; z-index:101; position:absolute;top:0px; left:0px;"></div>');  

//var imgObj = document.createElement("img");
//imgObj.src = "/images/gunlun.gif";

//divObj2.appendChild(imgObj);

//document.body.appendChild(divObj1);
//document.body.appendChild(divObj2);

//以下代码能兼容IE6

var divObj1 = document.createElement('<div id="loading" style="width: 100%; text-align:center; vertical-align: middle; height: 100%; background-color:#000000; filter:alpha(opacity=30);z-index:100; position:absolute;top:0px; left:0px;">' 
          + '<iframe src="" style="position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:-1; filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0.3);" frameborder="0"></iframe></div>');

var _scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); 
var _scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); 
// _scrollHeight = Math.max(document.body.offsetHeight,document.documentElement.scrollHeight); 
divObj1.style.width=_scrollWidth+"px"; 
divObj1.style.height=_scrollHeight+"px";
var divObj2 = document.createElement('<div id="loadingImg" style="text-align:center; margin-left:45%; margin-top: 18%; height: 20px; z-index:101; position:absolute;top:0px; left:0px;"></div>');

var imgObj = document.createElement("img");
imgObj.src = "images/gunlunNew.gif";

divObj2.appendChild(imgObj);

var _t1 = document.body.appendChild(divObj1);
var _t2 = document.body.appendChild(divObj2);
}

----------------------------------

以下为使用jQuery的写法：

var mask="<div id='m'></div>";
   var loading="<div id='lo'><div><img src='/cdb/images/gunlunNew.gif'/></div></div>"
   $("body").prepend(loading).prepend(mask);

//设置loading图片及其属性   
$("#lo").css("position","absolute").css("width","221px").css("height","51px").css("background-color","#fff").css("text-align","center").css("z-index","9999").css("top","271px").css("left","471px");

//设置透明背景及其属性，css("-moz-opacity","0.4")-->设置透明度
$("#m").width($(document).width()).height($(document).height()).css("opacity","0").css("background-color","#666").css("filter","alpha(opacity=0)").css("-moz-opacity","0").css("position","absolute").css("z-index","10");