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