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

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312-8" />
 5 <title></title>
 6 <style>
 7 #content {
 8 width: 300px;
 9 height: 150px;
10 padding: 10px;
11 margin: 0 auto;
12 display: none;
13 line-height: initial;
14 }
15 
16 span {
17 width: 50px;
18 margin-right: 10px;
19 border: 1px solid red;
20 }
21 </style>
22 
23 <script>
24 onload = function () {
25 var links = document.getElementById("login");
26 var cancle = document.getElementById("cancel");
27 var content = document.getElementById("content");
28 
29 links.onclick = function () {
30 var cover = document.createElement("div");
31 
32 cover.id = "cover";
33 cover.style.left = 0;
34 cover.style.right = 0;
35 cover.style.top = 0;
36 cover.style.bottom = 0;
37 cover.style.position = "fixed";
38 cover.style.backgroundColor = "#CCC";
39 cover.style.opacity = "0.5";
40 
41 cover.appendChild(content);
42 content.style.display = "block";
43 content.style.backgroundColor = "white";
44 document.body.appendChild(cover);
45 
46 return false;
47 };
48 
49 // cancel its remove the cover
50 cancel.onclick = function () {
51 document.body.removeChild(document.getElementById("cover"));
52 };
53 //login
54 document.getElementById("sub_ok").onclick = function () {
55 formsub = document.getElementsByTagName("form")[0];
56 formsub.submit();
57 alert("登陆成功了");
58 return false;
59 };
60 };
61 </script>
62 </head>
63 <body>
64 <form>
65 <div>
66 <a href="#" id="login">登陆</a>
67 </div>
68 
69 <div id="content">
70 NAME:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name" /><br />
71 <br />
72 PASSWORD:
73 <input type="password" name="psw" />
74 <div style="margin: 5px;">
75 <input type="submit" id="sub_ok" value="提 交" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="取 消" id="cancel" />
76 </div>
77 </div>
78 </form>
79 </body>
80 </html>

 

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

posted @ 2014-10-05 10:20  阿两君  阅读(773)  评论(0)  编辑  收藏  举报