标题: Div+Css登陆窗体实现
- 镜涛 2008-05-09 00:40 阅读:566
- 评论:2 查看评论 | 添加评论
[图片]    <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挡住网页内容。取消登陆时再次屏蔽!
查看评论 | 添加评论
返回顶部 | 返回首页