Div + CSS login form implementation

< 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 >
User name:
</ TD >
< TD >
< Input name = " Username "   />
</ TD >
</ Tr >
< Tr >
< TD >
Password:
</ TD >
< TD >
< Input ID = " Password " Name = " Password "   />
</ TD >
</ Tr >
< Tr >
< TD >
< Input type = " Submit " Value = " Login "   />
</ TD >
< TD >
< Input type = " Reset " Value = " Cancel " Onclick = " Reset () "   />
</ TD >
</ Tr >
</ Table >
</ Div >
< Div ID = " Block " >
</ Div >
</ Form >

The last Id = block Div of form is used to block the following content.
CSS: /**/ /*Log on to form*/
# Loginform
{
Border: solid 1px # aed5fd;
Position: absolute;
Top:35%;
Left:40%;
Z-Index:2000;
Background-Color: # eaf4fe;
}
/**/ /*Shield Div*/
# Block
{
Background - Color: # cccccc;
Position: absolute;
Top: 0px;
Left: 0px;
Z - Index: 1000 ;
Display: block;
Width: 100 % ;
Height: 210 % ;
/**/ /*Sets the transparency of the blocked Div.*/
Filter: progid: DXImageTransform. Microsoft. Alpha (Enabled = True , Style = 0 , Opacity = 40 );
}

JS: Function showlogin ()
{< br> var ele = document. getelementbyid ( " loginform " );
var block = document. getelementbyid ( " block " );
ELE. style. display = " " ;< br> block. style. display = " " ;< BR >}
Function reset ()
{
Document. getelementbyid ("Loginform"). Style. Display="None";
Document. getelementbyid ("Block"). Style. Display="None";

}
Window. onload = Reset ();

Principle:
At the beginning of page loading, the login Div and the shield Div already exist, but they are only set to hide. When you click "login", the showlogin () is called to display the login and block the webpage content. Unblocking again when canceling login!