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挡住网页内容。取消登陆时再次屏蔽！
Tag标签: Div,CSS,登陆
posted @ 2008-05-09 00:40 镜涛 阅读(512) 评论(2)  编辑 收藏 所属分类: AJAX

  回复  引用  查看    
#1楼 2008-05-09 08:17 | asheng      
呵 不错
  回复  引用  查看    
#2楼 2008-05-09 18:18 | ellle      
等下吃饭完好好研究下!

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
 
另存  打印
最新IT新闻:
· 金山:360的免费杀毒只能是短期行为
· 江民科技回应杀毒软件免费说 没病不能乱吃药
· WCG2008中国区总决赛打响
· 新型的编程语言:eC
· 免费的BitDefender能复制卡巴斯基的成功吗?
博客园新闻频道  博客园首页  社区