请问类似于csdn的‘结贴加分’这样的窗口怎么做？

^_^昨天给人回答时写的,看看是不是你要地<html>
<body>
背<p/>景<p/>的<p/>内<p/>容
<input type="button" value="结贴" onclick="locking()"/>
<div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; 
z-index: 2; left: 0px; display: none;"> 
</div>
<div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-400)/2); top: expression((document.body.offsetHeight-170)/2); 
background-color: #fff; display: none;" > 
<table width="400" border="0" cellpadding="0" cellspacing="0" style="border: 0  solid  #e7e3e7; 
border-collapse: collapse"> 
<tr> 
<td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px; 
font-weight: bold; font-size: 14px;" height="27" valign="middle"> 
内容标题
</td> 
</tr>
<tr>
<td>
内容<P/>内容<P/>内容<P/>内容<P/>
</td>
<tr>
<td><input type="button" value="关闭这个" onclick="document.all.ly.style.display='none';document.all.Layer2.style.display='none'"/></td>
</tr>
</tr>
</table> 
</div>
</form>
<script language=javascript>
function  locking()
{  
document.all.ly.style.display="block";  
document.all.ly.style.width=document.body.clientWidth;  
document.all.ly.style.height=document.body.clientHeight;  
document.all.Layer2.style.display='block';  
}  
</script>
</body>
</HTML>

解决方案 »

  1.   

    css遮罩层
    给你贴一个代码：
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Demo</title>
    <style type="text/css">
    <!--
    *{
       margin:0;
       padding:0;
    }
    html,body{
       height:100%;
    }
    #shadow{
       position:absolute;　
       left:0;
       top:0;
       width:100%;
       height:100%;
       background-color:#0060C0;
       filter:alpha(opacity=20);
       opacity:0.2;
    }
    #box{
       position:absolute;
       left:50%;
       top:50%;
       width:400px;
       height:180px;
       margin:-90px 0 0 -200px;
       border:1px solid #84A0C4;
       background-color:#DFE8F6;
       text-align:center;
    }
    -->
    </style>
    <script language="javascript" type="text/javascript">
    <!--
    function createDiv()
    {
        var shadow = document.createElement("div");
        shadow.setAttribute("id","shadow");
        shadow.style.zIndex="10";    var box=document.createElement("div");
        box.setAttribute("id","box");
        box.style.zIndex="999";
        
        var spanUser=document.createElement("span");
        spanUser.innerHTML="User:";    var textUser=document.createElement("input");
        textUser.setAttribute("type","text");
        textUser.setAttribute("id","textUser");    var button=document.createElement("input");
        button.setAttribute("type","button");
        button.setAttribute("id","button1");
        button.setAttribute("value","Confirm");
        button.onclick=hideDiv;    box.appendChild(spanUser);
        box.appendChild(textUser);
        box.appendChild(button);    document.body.appendChild(shadow);
        document.body.appendChild(box);
    }
    function hideDiv()
    {
        var textUser=document.getElementById("textUser");
        var user=document.getElementById("user");
        user.value=textUser.value;    var box=document.getElementById("box");
        var shadow=document.getElementById("shadow");
        
        document.body.removeChild(box);
        document.body.removeChild(shadow);
    }
    -->
    </script>
    </head>
    <body>
    <div style="text-align:center">
    <input id="user" type="text" />
    <input id="btnshow" type="button" onclick="createDiv()" value="Display" />
    </div>
    </body>
    </html>