在原页面显示一个矩形框, 原来页面蒙上一层颜色

如题, 常常在一些ASPX页面看到这种效果, 请问怎么样实现?
谢谢.

解决方案 »

  1.   

    <HTML><HEAD>
    <META content="MSHTML 6.00.2800.1586" name=GENERATOR></HEAD>
    <BODY><INPUT onclick="sAlert('正在导入...<br/>正在将Word文档导入到编辑器,请稍候... <br/>&nbsp;科技发展有限公司');" type=button value=点击这里>
    <SCRIPT language=javascript type=text/javascript>
    //Author:Daviv
    //Blog:<a href="<a href="http://blog.163.com/jxdawei" target="_blank">http://blog.163.com/jxdawei</a>" target="_blank"><a href="http://blog.163.com/jxdawei" target="_blank">http://blog.163.com/jxdawei</a></a>
    //Date:2006-10-28
    //Email:[email protected]
                function sAlert(str){
                var msgw,msgh,bordercolor;
                msgw=400;//提示窗口的宽度
                msgh=100;//提示窗口的高度
                bordercolor="#336699";//提示窗口的边框颜色
                titlecolor="#99CCFF";//提示窗口的标题颜色
                
                var sWidth,sHeight;
                sWidth=document.body.offsetWidth;
                sHeight=document.body.offsetHeight;
                
                var bgObj=document.createElement("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=sWidth + "px";
                bgObj.style.height=sHeight + "px";
                document.body.appendChild(bgObj);
                var msgObj=document.createElement("div")
                msgObj.setAttribute("id","msgDiv");
                msgObj.setAttribute("align","center");
                msgObj.style.position="absolute";
                msgObj.style.background="white";
                msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
                msgObj.style.border="1px solid " + bordercolor;
                msgObj.style.width=msgw + "px";
                msgObj.style.height=msgh + "px";
              msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
              msgObj.style.left=(sWidth-msgw)/2 + "px";
              var title=document.createElement("h4");
              title.setAttribute("id","msgTitle");
              title.setAttribute("align","right");
              title.style.margin="0";
              title.style.padding="3px";
              title.style.background=bordercolor;
              title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
              title.style.opacity="0.75";
              title.style.border="1px solid " + bordercolor;
              title.style.height="18px";
              title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
              title.style.color="white";
              title.style.cursor="pointer";
              title.innerHTML="关闭";
              title.onclick=function(){
                document.body.removeChild(bgObj);
            document.getElementById("msgDiv").removeChild(title);
            document.body.removeChild(msgObj);
            }
              document.body.appendChild(msgObj);
              document.getElementById("msgDiv").appendChild(title);
              var txt=document.createElement("p");
              txt.style.margin="1em 0"
              txt.setAttribute("id","msgTxt");
              txt.innerHTML=str;
          document.getElementById("msgDiv").appendChild(txt);
          }
            </SCRIPT>
     </BODY></HTML>
      

  2.   

    樓主試試我的這個效果，如何：<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html> 
    <head> 
    <title> New Document </title> 
    <meta http-equiv="Content-Type" content="text/html" charset="gb2312"> 
    </head> 
    <script language="JavaScript"> 
    function showEdit(id){
        document.all["bgLayer"].style.display=""; 
        document.all["bgLayer"].style.height=document.body.scrollHeight; 
    } 
    </script> 
    <body leftmargin=0 topmargin=0>
    test test test<br />
    test test test<br />
    <div id="bgLayer" style="position:absolute;background:#CCCCCC;top:0px;width:100%;height:100%;filter:alpha(style=0,opacity=50);display:none;z-index:9998;"> 
    </div> 
    <input type="button" value="Test" onClick="javaScript:showEdit();"></body> 
    </html>
      

  3.   

    楼上两位的代码在FIREFOX存在问题， 第一个是背景大小只是一个长方矩形，未填满整个个页面，
    第二个的就是没有半透明效果。请问其它人还有方法吗？
      

  4.   

    Click the link to solve your problem.Good luck!