IT技术学习网
IT技术学习网
您的位置: 主页 > 编程技术 > javascript >

js+css实现user登陆框遮罩层效果

2014-10-08 11:26 来源: 综合整理 阅读:
以下代码,通过js+css实现了user登陆框的遮罩层效果。全部复制即可使用。
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312-8" />
	<title></title>
	<style>
	#content {
	width: 300px;
	height: 150px;
	padding: 10px;
	margin: 0 auto;
	display: none;
	line-height: initial;
	}
	span {
	width: 50px;
	margin-right: 10px;
	border: 1px solid red;
	}
	</style>
	<script>
	onload = function () {
	var links = document.getElementById("login");
	var cancle = document.getElementById("cancel");
	var content = document.getElementById("content");
	
	links.onclick = function () {
	var cover = document.createElement("div");
	
	cover.id = "cover";
	cover.style.left = 0;
	cover.style.right = 0;
	cover.style.top = 0;
	cover.style.bottom = 0;
	cover.style.position = "fixed";
	cover.style.backgroundColor = "#CCC";
	cover.style.opacity = "0.5";
	
	cover.appendChild(content);
	content.style.display = "block";
	content.style.backgroundColor = "white";
	document.body.appendChild(cover);
	
	return false;
	};
	
	// cancel its remove the cover
	cancel.onclick = function () {
	document.body.removeChild(document.getElementById("cover"));
	};
	//login
	document.getElementById("sub_ok").onclick = function () {
	formsub = document.getElementsByTagName("form")[0];
	formsub.submit();
	alert("登陆成功了");
	return false;
	};
	};
	</script>
	</head>
	<body>
	<form>
	<div>
	<a href="#" id="login">登陆</a>
	</div>
	
	<div id="content">
	NAME:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name" /><br />
	<br />
	PASSWORD:
	<input type="password" name="psw" />
	<div style="margin: 5px;">
	<input type="submit" id="sub_ok" value="提 交" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="取 消" id="cancel" />
	</div>
	</div>
	</form>
	</body>
	</html>

js+css实现user登陆框遮罩层效果
转载需注明出处:IT技术学习网 http://www.itjsxx.com/javascript/447.html

评论文章 js+css实现user登陆框遮罩层效果
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
IT技术学习网 - 关于我们 - 联系我们 - 版权声明 - 网站地图