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擋住網頁內容。取消登陸時再次屏蔽！