请教：透明层

先将下面的样式表保存为StyleSheet.css
body {
font-size: 12px;
line-height: 170%;
color: #003366;
margin:0px;
}
td,select,option {
color:#003366;
font-size:12px;
}
.inputStyle {
border-top:1px solid #1F506D;
border-left:1px solid #1F506D;
border-right:1px solid #DFF4FF;
border-bottom:1px solid #DFF4FF;
color:#003366;
font-size:12px;
height:17px;
}
.buttonStyle {
border-top:1px solid #DFF4FF;
border-left:1px solid #DFF4FF;
border-right:1px solid #0C1D2E;
border-bottom:1px solid #0C1D2E;
background-color:#42719F;
padding-top:2px;
padding-left:2px;
padding-right:2px;
color:#ffffff;
font-size:12px;
font-family:宋体;
height:19px;}
.buttonGOStyle {
border-top:1px solid #DFF4FF;
border-left:1px solid #DFF4FF;
border-right:1px solid #1F506D;
border-bottom:1px solid #1F506D;
background-color:#235383;
padding-left:3px;
padding-right:3px;
color:#ffffff;
font-size:11px;
font-family:Arial, Helvetica, sans-serif,宋体;
height:19px;}
.HeadDiv {
width:1000px;
text-align:center;
}
.SNSName {
font-size:14px;
font-weight:bold;
text-align:left;
}
.SNSDiv {
width:1000px;
text-align:center;
}
.SNSPaddingDiv {
width:980px;
padding-left:10px;
padding-right:10px;
}
.SNSHTTP {
padding:3px;}
.MBG {
width:100%;
background-image:url(../images/Sub_Menu_BG.gif);
}.MenuBG {
background-image:url(../images/Sub_Menu_BG_1.gif);
width:70px;
font-size:14px;
text-align:center;
}
.MenuCurrentBG {
background-image:url(../images/Sub_Menu_BG_2.gif);
width:70px;
font-size:14px;
text-align:center;
}
.MenuLine {
width:2px;
height:43px;
border-left:1px solid #BFDDF1;
border-right:1px solid #ffffff;
}
a:link {
font-size: 12px;
color:#003366;
text-decoration: none;
}
a:visited {
font-size: 12px;
color:#003366;
text-decoration: none;
}
a.MenuLink:link {
font-size: 14px;
color:#003366;
text-decoration: none;
}
a.MenuLink:visited {
font-size: 14px;
color:#003366;
text-decoration: none;
}
.SortStyle {
background-image:url(../images/Sub_Menu_BG_3.gif);
border:1px solid #B9D9F0;
height:29px;
}
.SortTitle  {
background-image:url(../images/Sub_Sort_BG.gif);
height:31px;
padding-left:5px;
border-bottom:2px solid #A3B1CF;
}
.SortBG1 {
background-image:url(../images/sort_bg_1.gif);
padding-left:15px;
padding-right:15px;
}
.SortBG2 {
background-image:url(../images/sort_bg_2.gif);
padding-left:15px;
padding-right:15px;
}
.SortBG3 {
background-image:url(../images/sort_bg_3.gif);
padding-left:15px;
padding-right:15px;
}
.PStyle {
line-height:170%;
}
.dianstyle {
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
color:#FFCC00;
text-align:center;
}
.dianRedstyle {
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
color:#FF0000;
text-align:center;
}
.dianRedstyle1 {
font-family:Arial, Helvetica, sans-serif;
font-size:8px;
color:#FF0000;
text-align:center;
}
.RightLine {
border-right:1px solid #91B9E0;
background-image:url(../images/Sub_word_line.gif);
}
.TitleBGStyle {
background-color:#F0FAFF;
border-right:1px solid #91B9E0;
}
.TitleBorderStyle {
border-top:1px solid #91B9E0;
border-bottom:2px solid #DFF4FF;
}
.tableListBG {
background-color:#CFDFF1;
}
.photoView {
width:75px;
height:75px;
z-index:1;
visibility: inherit;
overflow: hidden;
}
.BlogPhotoView {
width:79px;
height:95px;
padding:3px;
z-index:1;
visibility: inherit;
overflow: hidden;
}
.borderTop1 {
width:206px;
height:14px;
background-image:url(../images/sort_border_top.gif);
}
.borderBottom1 {
width:206px;
height:14px;
background-image:url(../images/sort_border_bottom.gif);
}
.borderTop2 {
width:513px;
height:13px;
background-image:url(../images/sort_border_top_1.gif);
}
.borderBottom2 {
width:513px;
height:13px;
background-image:url(../images/sort_border_bottom_1.gif);
}
.borderTop2 {
width:513px;
height:13px;
background-image:url(../images/sort_border_top_1.gif);
}
.borderBottom2 {
width:513px;
height:13px;
background-image:url(../images/sort_border_bottom_1.gif);
}
.borderTop3 {
width:216px;
height:14px;
background-image:url(../images/sort_border_top_2.gif);
}
.borderBottom3 {
width:216px;
height:14px;
background-image:url(../images/sort_border_bottom_2.gif);
}
.photoBorder {
border:2px solid #E8F0F7;
text-align:center;
width:110px;
}
.photoBorderDiv {
border:1px solid #B0CBE3;
padding:7px;
text-align:center;
height:100%;
width:100px;
}
.photoBorderDetail {
border:2px solid #E8F0F7;
text-align:center;
}
.photoBorderDivDetail {
border:1px solid #B0CBE3;
padding:7px;
text-align:center;
width:100%;
}
.photoTitleDiv {
padding:3px;
text-align:center;
}
.VideoBorder {
border:2px solid #E8F0F7;
text-align:center;
padding:5px;
width:180px;
}
.VideoTitle {
padding:5px;
font-weight:bold;
text-align:left;
}
.VideoWord {
padding:2px;
text-align:left;
line-height:170%;
}
fieldset {
border:1px solid #B0CBE3;
padding:10px;
}
.borderRight {
border-right:1px solid #B0CBE3;
}
.WordBorder {
border:1px solid #B0CBE3;
}
.WordBorderBottom {
background-color:#EEFAFF;
border-bottom:1px solid #B0CBE3;
}
.DivPStyle {
border-bottom:1px dotted #B0CBE3;
line-height:170%;
}
.SortSpan {
width:200px;
text-align:right;
}
.contentStyle {
font-size: 12px;
color:#003366;
line-height:170%;
padding:10px;
}
hr {
color:#E8F0F7;
}
.LoginWinDIV{
width:480px; 
height:240px; 
z-index:99; 
background-color: #F0F4FB;
    border:1px solid #ffffff;
    border-bottom:4px solid #92a9c4;
    padding:1px;
}
.LoginWinDIV1 {
position:absolute; 
left:0px; 
top:0px; 
z-index:98; 
background-color: #000000;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
.LoginWinDIVBG{
height:25px; 
background-color:#acc0d8;
    border-bottom:1px solid #859DBC;
}
.ShieldWinDIV {
position:absolute; 
left:0px; 
top:0px; 
background-color: #0D1426;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
z-index:98;
}
.BottomTable {
border:2px solid #D9EEF9;
}
.BottomTD {
background-color:#F0F9FD;
}

解决方案 »

  1.   

    再将下面的内容保存为test.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>NET博览群,NG制作,对话框</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript">
    <!--
    var url;
    url=location;
    //登录窗口
    function Login(SiteType,string){
    if(LoginWinDIV)
    {
    LoginWinDIV.style.display='';
    NGShieldDIV();
    }
    }//屏蔽操作
    function NGShieldDIV() {
    //    alert(document.body.clientHeight+"~"+document.body.offsetHeight);
    alert(document.body.clientHeight);
    alert(screen.height-120);
    if(document.body.clientHeight>screen.height-120){
    Layer1height=document.body.clientHeight;
    Layer1width=document.body.offsetWidth;
    }
    else{
    Layer1height=screen.height;
    Layer1width=document.body.offsetWidth;
    }
    var str="<div id='LoginWinDIV2' oncontextmenu='event.returnValue=false' class='ShieldWinDIV' style='width:"+Layer1width+";height:"+Layer1height+";'></div>";
    ShieldWinDIV.innerHTML=str;
    }//放开操作
    function OpenDIV() {
    ShieldWinDIV.innerHTML="";
    }
    function CheckRight()
    {

    document.all.MyUrl.value='frmUploadFile.asp?DomainID=685&DomainType=2'
    Login("jobEMS","抱歉，路人不可上传文件，您可以注册后再上传，谢谢！（^－^）");
    return false

    }
    //-->
    </script></head>
    <body height=100000px>
    <span id='ShieldWinDIV'></span>
    <!------------- 用户登录 begin ------------->
    <div id="LoginWinDIV" class="LoginWinDIV" style="position:absolute; left:160px; top:128px;  z-index:99;padding:1px; display:none"  >
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="25" background="images/LoginWinDIV_titleBG.gif"><table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" class="LoginWinDIVBG">
            <tr>
              <td align="left">&nbsp;&nbsp;<STRONG>用户登录</STRONG></td>
              <td align="right"><img src="images/ICO_CloseDIV.gif" alt="close" width="14" height="14" hspace="8" vspace="4" onclick="OpenDIV();LoginWinDIV.style.display='none'"/></td>
            </tr>
          </table>
          </td>
        </tr>
          <td><table width="90%"  border="0" align="center" cellpadding="4" cellspacing="0">
            <form name="theForm" action="" method="post"  onsubmit="return CheckLogin();">
              <tr>
                <td colspan="3">&nbsp;</td>
              </tr>
              <tr>
                <td width="25%" align="center" style="padding-top:5px;">用户名：</td>
                <td width="43%" valign="top"><input name='Unicorn_UserName' type="text" class="inputStyle" size="15" style="height:19px;width:95%"></td>
                <td>
                  <table width="100%"  border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td>
      <input name="btnSubmit" type="submit" class="buttonStyle" value=" 登录 "/>
      </td>
                    </tr>
                </table></td>
              </tr>
              <tr>
                <td align="center" style="padding-top:5px;">密&nbsp;&nbsp;码：</td>
                <td valign="top"><input name='Unicorn_Password' type="password" class="inputStyle" size="15" style="height:19px;width:95%"></td>
                <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td>
      <input name="btnSubmit" type="button" class="buttonStyle" value=" 取消 " onclick="OpenDIV();LoginWinDIV.style.display='none';tishiyu.innerText=''"/>
      <input name='MyUrl' type="hidden"  value="">
      </td>
                    </tr>
                </table></td>
              </tr>
            </form>
            <tr>
              <td colspan="3" height="10"></td>
            </tr>
            <tr>
              <td align="center" colspan="3"><font color="#888888">&middot;</font> <span onclick="OpenDIV();LoginWinDIV.style.display='none';tishiyu.innerText=''" style="cursor:hand">关闭窗口</span> <font color="#888888">&middot;</font></td>
            </tr>
          </table></td>
        </tr>

        <tr>
          <td>&nbsp;</td>
        </tr>
    <tr><td align="center"><div align="center" id="tishiyu"></div></td></tr>  </table>
    </div><script type="text/javascript" language="javascript">var DIVWidth=document.body.clientWidth;
    var DIVHeigth=document.body.clientHeight; LoginWinDIV.style.left=DIVWidth/2-240;
    LoginWinDIV.style.top=200;



    function CheckLogin(){
    if (document.all.Unicorn_UserName.value==''){
    alert("请输入用户名！");
    document.all.Unicorn_UserName.focus();
    return false;
    }
    if (document.all.Unicorn_Password.value==''){
    alert("请输入密码！");
    document.all.Unicorn_Password.focus();
    return false;
    }

    return true;

    } </script>
    <!------------- 用户登录 end ---------------><div><img src="images/blank.gif" width="1" height="11" /></div><center>
    <div class="SNSDiv">
    <div class="SortTitle" align="left">
    <img src="images/Sub_ICO_2.gif" alt="JobEMS ICO" width="28" height="24" align="absmiddle" vspace="3"/> <strong>对话框演示</strong>
    </div>
    <div class="SNSDiv" style="padding-top:5px;padding-bottom:5px;">  <div align="left">  &nbsp;
        <input name="btnSubmit2" type="button" class="buttonStyle" value="上传文件"  onclick=" CheckRight()"/>
      </div>
    </div>
    </div>
    </center>
    <center>
    <div class="SNSDiv" style="height:350px;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" valign="top">
    <div>
      <table width="100%" border="0" cellpadding="5" cellspacing="1" class="TitleBorderStyle">
                <tr>
                  <td width="18" height="26" class="TitleBGStyle">&nbsp;</td>
                  <td align="center" class="TitleBGStyle"><strong>文件名称</strong></td>
                  <td width="119" align="center" class="TitleBGStyle"><strong>上传者</strong></td>
                  <td width="79" align="center" class="TitleBGStyle"><strong>文件大小</strong></td>
      <td width="69" align="center" class="TitleBGStyle"><strong>下载次数</strong></td>
                  <td width="79" align="center" class="TitleBGStyle"><strong>上传时间</strong></td>
                  <td width="79" align="center" class="TitleBGStyle" style="border-right:0px;"><strong>操作</strong></td>
                </tr>
       </table>
       <table width="100%" border="0" cellpadding="5" cellspacing="1" class="tableListBG">
                
          
              </table>
    </div>
      </td>
        </tr>
      </table>
      </div>
    </center><center>
    <div class="SNSDiv">
    <table width="100%" align="center" border="0" cellpadding="5" cellspacing="0" class="BottomTable">
      <tr>
        <td align="center" class="BottomTD"><span style='font-family:arial'>NET博览群 NG 制作</span> 版权所有 &copy; 2006</td>
      </tr>
    </table>
    </div>
    </center></body>
    </html>
      

  2.   

    这个做的 比较好的， 我觉得当属 ext， 它的中文网站关闭升级中， 要下载可去英文网站
      

  3.   

    给你一个例子
    <HTML><HEAD>
    <META content="MSHTML 6.00.2800.1586" name=GENERATOR></HEAD>
    <BODY><INPUT onclick="sAlert('测试效果<br/>还可以直接书写HTML代码 <br/>&copy; 2006');" type=button value=点击这里>
    <SCRIPT language=javascript type=text/javascript>
    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>
      

  4.   

    rjzou2006你的代码只能用于你自己，我放进其他网页根本就屏蔽不掉控件，而且覆盖大小不能随高度增加而增加。
      

  5.   

    建议使用现成组件．．．如ThickBox3.0及jBox
      

  6.   

    rjzou2006你的代码在火狐中可行，在IE6中不行
      

  7.   

    <?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <title> neverDialog - http://www.never-online.net </title>
     <meta http-equiv="ImageToolbar" content="no" />
     <meta name="author" content="BlueDestiny, never-online"/>
     <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Refercence, BlueDestiny, never-online, www.never-online.net"/>
     <meta name="description" content="BlueDestiny, never-online"/>
     <meta name="title" content="neverDialog - http://www.never-online.net" />
     <meta name="creator.name" content="Genius Lau, never-online, blueDestiny" />
     <style type="text/css" media="all" title="Default">
     body { background-color:appworkspace; margin:0; padding:0; }
     .button { font-size:9pt; font-family:verdana; border-left:4px solid #444; border-top:1px solid #444; border-bottom:1px solid #444; border-right:1px solid #444; margin:20px; }
     </style>
     <script type="text/javascript">
     //<![CDATA[
     function neverDialog(event, msg, handler, notfilter) {
     // Script by BlueDestiny, never-online
     // Simple simulate modal dialog
     // welcome to http://blog.never-online.net
     // http://blog.csdn.net/BlueDestiny/
     // and keep these copyright
     window._timer = null;
     var ie = document.all?true:false; 
     if (event) event.srcElement ? event.srcElement.blur() : event.target.blur();
     if (_timer) window.clearTimeout(_timer);
     function getElById(idStr) { return document.getElementById(idStr); }
     var d = getElById("dialog");
     var a = getElById("demo");
     var Htmls = "";
     var cnt = 20;
     Htmls += "<html xmlns=\"http://www.w3.org/1999/xhtml\">\n"
     + "<head>\n"
     + "<style text=\"text/css\">\n"
     + "body { margin:40px; background-color:#eeeeee; }\n"
     + "* { font-size:9pt; font-family:verdana; }\n"
     + ".bold { font-weight:bold; }\n"
     + ".button { width:100px; border-left:4px solid #444; border-top:1px solid #444; border-bottom:1px solid #444; border-right:1px solid #444; }\n"
     + "</style>\n"
     + "</head>\n"
     + "<body>\n"
     + "<p align='center'>never dialog demo, just a test, http://blog.never-online.net</p>\n"
     + "<p align='center' class='bold'>" +msg+ "</p>\n"
     + "<p align='center'>\n"
     + "<input class='button' type='button' value=' - O K - ' onclick='top.window.document.getElementById(\"demo\").style.display=\"none\";" +(handler?";top.window."+handler+"":"")+ "\'/>\n"
     + "<input type='button' class='button' value=' - N O -' onclick='top.window.document.getElementById(\"demo\").style.display=\"none\";top.window.document.body.style.overflow=\"\"'/>"
     + "</p>\n"
     + "</body>\n"
     + "</html>"
     d.contentWindow.document.open("text/html");
     d.contentWindow.document.write(Htmls);
     d.contentWindow.document.close();
     with(a.style) {
     display = "block";
     left="0px";
     top="0px";
      margin="0px";
     width=(document.body.clientWidth||window.innerWidth)+"px";
     height=(document.body.scrollHeight+25)+"px";
     }
     function f_alpha() {
     if (++cnt>=80) {
     window.clearTimeout(_timer);
     return;
     }
     ie?a.style.filter="alpha(opacity=" +cnt+")":a.style.MozOpacity=(cnt/100)+"";
     _timer = window.setTimeout(f_alpha, 10);
     }; notfilter?'':f_alpha();
     }
     function handler(event) {
     neverDialog(event,'welcome to http://blog.never-online.net');
     }
     //]]>
     </script>
    </head>
    <body id="www.never-online.net">
    <input type="button" value="Excute it" onclick="neverDialog(event,'Are You Sure To Excute it?','handler(event)')" class="button"/>
    <div height="100%" width="100%" style="display:none;position:absolute;-moz-opacity:0.6" id="demo">
    <iframe id="dialog" height="100%" width="100%" frameborder="0" marginheight="0" marginwidth="0" style="font-size:9pt; font-family:verdana;">
    </iframe>
    </div><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p><p> &amp;nbsp; </p>
    </body>
    </html>看看这个，有没有用，或许能给你点提示！！！！
      

  8.   

    http://blog.csdn.net/cloudgamer/archive/2007/04/03/1550299.aspx
    参考一下
      

  9.   


    强烈推荐楼主去用thickbox!!，你所要求的效果就是thickbox的招牌
    http://hi.baidu.com/48238398/blog/item/cba538ec4cc18ad02f2e21b7.html
    可以到这里看教程