码迷,mamicode.com
首页 > 其他好文 > 详细

简单的遮罩层效果,user登陆显示效果

时间:2014-10-05 12:10:48      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   io   os   ar   for   sp   div   

<!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>

 

 

简单的登陆页面的跳转,是实现了效果,可是提交的时候,却没有触发submit,不过不违今天的主题哦。欢迎高手指点

简单的遮罩层效果,user登陆显示效果

标签:style   http   color   io   os   ar   for   sp   div   

原文地址:http://www.cnblogs.com/fuguoliang/p/4006760.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!