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挡住网页内容。取消登陆时再次屏蔽！