Div+Css登陆窗体实现

 <form id="Form1" runat="server" action="Index.aspx" method="post">     <div id="loginForm">         <table>             <tr>                 <td>                 </td>                 <td>                     <input type="hidden" value="Login" name="Login" />                 </td>             </tr>             <tr>                 <td>                     用户名：                 </td>                 <td>                     <input name="userName" />                 </td>             </tr>             <tr>                 <td>                     密码：                 </td>                 <td>                     <input id="password" name="password" />                 </td>             </tr>             <tr>                 <td>                     <input type="submit" value="登陆" />                 </td>                 <td>                     <input type="reset" value="取消" onclick="Reset()" />                 </td>             </tr>         </table>     </div>     <div id="block">     </div>     </form>form最后的id=block的div用来屏蔽后面的内容 CSS：

/**//*登陆Form*/ #loginForm {     border:solid 1px #AED5FD;     position:absolute;     top:35%;     left:40%;     z-index:2000;     background-color:#EAF4FE; } /**//*屏蔽Div*/ #block {     background-color:#CCCCCC;      position:absolute;      top:0px;      left:0px;     z-index:1000;     display:block;     width:100%;     height:210%;     /**//*设置屏蔽div的透明度*/     filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=true , style=0 , opacity=40);      }

js：

function ShowLogin() {  var ele=document.getElementById("loginForm");  var block=document.getElementById("block");  ele.style.display="";  block.style.display=""; } function Reset() {     document.getElementById("loginForm").style.display="none";     document.getElementById("block").style.display="none"; } window.onload=Reset();

原理： 加载页面开始时已经存在登陆div跟屏蔽div，只是设置为隐藏；点击登陆时调用showlogin(),将登陆显示并且用block挡住网页内容。取消登陆时再次屏蔽！