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 300px; 9 height: 150px; 10 padding: 10px; 11 margin: 0 auto; 12 display: none; 13 line-height: initial; 14 } 15 16 span { 17 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: <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="提 交" /> <input type="button" value="取 消" id="cancel" /> 76 </div> 77 </div> 78 </form> 79 </body> 80 </html>
简单的登陆页面的跳转，是实现了效果，可是提交的时候，却没有触发submit，不过不违今天的主题哦。欢迎高手指点