通过弹出一个层来屏蔽整个窗体,这个层的大小和窗体当前的大小一致,
背景为透明,而不对窗体本身进行任何的处理。从而达到延时加载和模
式窗体的效果 在弹出的层上面在弹出一个小层,在这个小层上面进行屏
蔽窗体时要进行的具体的操作。点击关闭或者是提交后移除弹出的两个层。
以下是具体实现的一些javascript代码:
  function StartGO()
 {
   var sWidth,sHeight;
   sWidth=document.body.offsetWidth; //获取窗体的宽度
   sHeight=screen.height;  //获取窗体的高度
     var bgObj=document.createElement("div"); //申明用来覆盖窗体的层的定义
   bgObj.setAttribute('id','bgDiv');
   bgObj.style.position="absolute";
   if(navigator.appName=="Microsoft Internet Explorer")
     bgObj.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src=http://www.cnbogs.com/Files/xiaojiangjiang/pass.ico, sizingMethod=scale)";
   else
      bgObj.style.backgroundImage="url( [url]http://www.cnbogs.com/Files/xiaojiangjiang/pass.ico[/url])";
   bgObj.style.top="0";  
   bgObj.style.opacity="40%";
   bgObj.style.left="0";
   bgObj.style.width="100%"; 
   bgObj.style.height=sHeight + "px";
   bgObj.style.zIndex = "10000";    document.body.appendChild(bgObj);   
 
    var msgBox=document.createElement("div");//申明具体实现的小层
    msgBox.setAttribute("id","msgBox1");
    msgBox.setAttribute("align","center");
    msgBox.style.background="white";
   msgBox.style.border="1px solid buttonface";
   msgBox.style.position = "absolute";
   msgBox.style.left = "50%";
   msgBox.style.top = "50%";
   msgBox.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
   msgBox.style.marginLeft = "-225px" ;
   msgBox.style.marginTop = -75+document.documentElement.scrollTop+"px";
   //if(page=="write"){msgh=300;msgw=500;}
   msgBox.style.width = "250px";
   msgBox.style.height ="100px";  
   msgBox.style.textAlign = "center";
   msgBox.style.lineHeight ="25px";
   msgBox.style.zIndex = "10001"; 
  
  
    var title=document.createElement("h4");
     title.setAttribute("id","msgTitle");
     title.setAttribute("align","right");
     title.style.margin="0";
     title.style.padding="3px"; 
     title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
     title.style.opacity="75%";
     title.style.background="buttonface";
     title.style.border="1px solid buttonface";
     title.style.height="18px";
     title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
     title.style.color="white";
     title.style.cursor="pointer"; 
// 关闭弹出层
     title.onclick=function(){
        document.body.removeChild(bgObj);
       document.body.removeChild(msgBox); 
     }
     title.innerHTML="关闭";
     document.body.appendChild(msgBox);
     var txt=document.createElement("p");
     txt.style.margin="1em 0"
     txt.setAttribute("id","msgTxt"); 
    //小层的正文部分
     txt.innerHTML="<form method='post' action='admin/login.aspx'><table><tr><td>管理员:</td><td><input name='name' type='text' id='name' style=' border-style: none none dotted none;border-width: 1px;'/></td><td></td></tr><tr><td>密&nbsp;&nbsp;码:</td><td><input name='password' type='password' id='pwd'  style=' border-style: none none dotted none;border-width: 1px;'/></td> <td><input name='Button' type='submit' value='提交' /></td></tr></table></form>";
//弹出层
     document.getElementById("msgBox1").appendChild(title);
//         document.getElementById("msgTitle").appendChild(guanbi); 
     document.getElementById("msgBox1").appendChild(txt);  
 }