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

转载于:https://www.cnblogs.com/jingtao/archive/2008/05/09/1189141.html