登录表单弹窗DEMO

来源：互联网发布：eve艾玛捏脸数据编辑：程序博客网时间：2024/04/27 21:38
登录表单弹窗，兼容IE6，Chrome, firefox
效果图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>登录表单DEMO</title><style type="text/css">body{margin:0;padding:0}#login_form{width:400px;border:3px solid gray;display:none;position:absolute;z-index:9999;background:white}.entry{height:30px;padding:10px}.entry label{width:100px;display:inline-block;height:20px;padding:5px;vertical-align:middle} .input_field{vertical-align:middle;width:200px;height:20px;border:1px solid gray;outline:none;font-size:20px;line-height:20px;padding:5px}.login_title{height:20px; padding:10px}.login_title span{color:gray;float:left;height:20px;display:block;font-size:20px}.login_title a{display:block; height:20px; width:20px;line-height:20px;float:right;text-decoration:none;outline:none;color:white;background:gray;text-align:center}.login_title a:hover{background:#FF8040}.input_hint{color:gray;font-style:italic;font-weight:normal; font-size:14px}.input_btn{width:100px; height:30px;text-decoration:none;outline:none;background:gray;display:inline-block;line-height:30px;text-align:center;color:white;font-weight:bold;font-size:20px}.input_btn:hover{background:#FF8040}</style></head><body><br><a href="javascript:void(0);" id="login">登录</a><div id="login_form">    <div class="login_title">          <span>用户登录</span>          <a href="#" id="close_btn" title="关闭">X</a>        </div>        <div style="clear:both"></div>    <form action="#" method="post">    <div class="entry">        <label for="username">用户名：</label>            <input class="input_field input_hint" type="text" id="username" name="username" value="用户名/电子邮箱" />        </div>       <div class="entry">        <label for="passwd">密 码：</label>            <input class="input_field" type="password" id="passwd" name="passwd" value="" />        </div>         <div class="entry">            <a class="input_btn" href="#" id="login_btn" name="login_btn"> 登 录 </a>        </div>       </form>    </div></body><script type="text/javascript">var a_login =  document.getElementById('login');var username = document.getElementById('username');var close_btn = document.getElementById('close_btn');//关闭按钮close_btn.href = 'javascript:void(0);';close_btn.onclick = function() {document.getElementById('login_form').style.display = 'none';}//用户名框的onfocus和onblur特效username.onfocus = function() {if(this.value == '用户名/电子邮箱') {this.value = '';this.className = 'input_field';}}username.onblur = function() {if(this.value == '') { //没做trimthis.className = this.className + ' input_hint';this.value = '用户名/电子邮箱';}}//点击登录按钮，显示登录框a_login.onclick = function() {var login_form = document.getElementById('login_form');//BODY宽度var docWidth = document.documentElement.clientWidth;//BODY高度var docHeight = document.documentElement.clientHeight;//计算中心位置（这里直接使用了固定宽高，还有一个小问题就是当浏览器放大和缩小时不会自动居中）login_form.style.top  = Math.floor(((docHeight - 300)/2)) + 'px';login_form.style.left = Math.floor(((docWidth - 400)/2)) + 'px';login_form.style.display = 'block';}</script></html>