登录表单弹窗DEMO

最新推荐文章于 2023-01-03 17:08:17 发布

kings988

最新推荐文章于 2023-01-03 17:08:17 发布

阅读量823

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/kings988/article/details/12053391

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

登录表单弹窗，兼容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 == '') { //没做trim
			this.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>

kings988

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
登录表单弹窗DEMO

登录表单DEMObody{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:
复制链接

扫一扫

专栏目录