首页 > 代码库 > 简单的遮罩层效果，user登陆显示效果
简单的遮罩层效果，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>
onl oad = 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="http://www.mamicode.com/#" id="login">登陆</a>
</div>
<div id="content">
NAME: <input type="text" name="name" /><br />
<br />
PASSWORD:
<input type="password" name="psw" />
<div style="margin: 5px;">
<input type="submit" id="sub_ok" value="http://www.mamicode.com/提 交" /> <input type="button" value="http://www.mamicode.com/取 消" id="cancel" />
</div>
</div>
</form>
</body>
</html>
简单的登陆页面的跳转，是实现了效果，可是提交的时候，却没有触发submit，不过不违今天的主题哦。欢迎高手指点
简单的遮罩层效果，user登陆显示效果