昨天公司說官網的登陸注冊每次要跳轉到另一個界面，能不能做一個簡單的，在界面彈出一個框框登陸，我想了想做了這么一個案例，大家來看看成不成
貼上代碼，實現了在同一個彈出窗上加載了登陸注冊功能！可自由點擊！當然樣式丑了一些！還請見諒！demo在下面
1這里是html內容
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>jQuery鼠標點擊彈出登錄框代碼</title>
6 </head>
7 <body>
8 <br><br><br><br><br><br><br>
9 <div class="login-header"><a href="javascript:void(0);">點擊，彈出登錄框</a></div>
10 <div class="login-header1"><a href="javascript:void(0);">點擊，彈出登錄框</a></div>
11
12 <div id="js_login" class="js_login">
13 <div class="js_title">
14 <ul>
15 <li class="conxk1" id="_xka1" onclick="switchTag('_xka','_xka_list',1,2,'conxk1','conxk2');">
16 用戶登錄 17 </li>
18 <li class="conxk2" id="_xka2" onclick="switchTag('_xka','_xka_list',2,2,'conxk1','conxk2');">
19 快速注冊 20 </li>
21 </ul> <span class="close-login">×</span>
22 </div>
23 <div class="js_content">
24 <div class="con_dak fixed clear">
25 <div id="_xka_list1" class="showbox">
26 <div class="de_list">
27 <!----------login start------>
28 <div id="login">
29 <div class="inputbg" id="logtext">
30 <input name="logusername" id="logusername" type="text" value="輸入用戶名" placeholder="輸入用戶名" class="inputsub" />
31 </div>
32 <div class="inputbg" id="pass">
33 <input name="logpassword" placeholder="輸入密碼" type="password" value="" id="logpassword" class="inputsub" />
34 </div>
35 <div class="buttons">
36 <input type="button" class="sub_btn1" id="login-submokaoba" onclick="ajaxlogin()" value="登 錄" />
37 </div>
38 <div class="clr"></div>
39 <div class="reg">
40 忘記密碼？<a href="http://www.mokaoba.com/">找回密碼</a> <span id="errmsg"></span>
41 </div>
42 </div>
43 <!--------login end--------->
44 </div>
45 </div>
46
47
48 <div id="_xka_list2" class="hidden">
49 <div class="de_list">
50 <!--------register start--------->
51 <form method="post" enctype="multipart/form-data" name="userinfoform" id="userinfoform">
52 <input type="hidden" name="enews" value="register" />
53 <input name="groupid" type="hidden" id="groupid" value="1" />
54 <div id="register">
55 <ul class="Reg-input">
56 <li class="Reg-text">用戶名：</li>
57 <li><input name="UserName" id="UserName" type="text" class="input-text" required="" /> <span class="UserName"></span></li>
58 </ul>
59 <ul class="Reg-input">
60 <li class="Reg-text">密碼：</li>
61 <li><input name="Password" onblur="CheckReg('Password', this.value)" type="password" id="Password" class="input-text" required="" /> <span class="Password"></span></li>
62 </ul>
63 <ul class="Reg-input">
64 <li class="Reg-text">重復密碼：</li>
65 <li><input name="repassword" onblur="CheckReg('repassword',this.value)" type="password" id="repassword" class="input-text" required="" /> <span class="repassword"></span></li>
66 </ul>
67 <ul class="Reg-input">
68 <li class="Reg-text">真實姓名：</li>
69 <li><input name="RealName" onblur="CheckReg('RealName', this.value)" type="text" id="RealName" class="input-text" required="" /> <span class="RealName"></span></li>
70 </ul>
71 <ul class="Reg-input">
72 <li class="Reg-text">手機號碼：</li>
73 <li><input name="Telephone" onblur="CheckReg('Telephone', this.value)" type="text" id="Telephone" class="input-text" required="" /> <span class="Telephone"></span></li>
74 </ul>
75 <ul class="Reg-input">
76 <li class="Reg-text">E-mail：</li>
77 <li><input name="Mail" onblur="CheckReg('Mail', this.value)" type="text" id="Mail" class="input-text" required="" /> <span class="Mail"></span></li>
78 </ul>
79 <ul class="Reg-input">
80 <li class="Reg-text"> </li>
81 <li id="checkbox"><input type="checkbox" id="checkin" onclick="checkpass('all')" /> 我已閱讀並接受《<a href="/http://www.jiao4.com/javascript" target="_blank">服務條款</a>》</li>
82 </ul>
83 <div style="clear:both"></div>
84 <div class="buttons">
85 <input type="button" class="sub_btn1" id="Reg-submokaoba" onclick="ajaxzhuce()" name="zhuce" value="注 冊" /> <span id="checkreg"></span>
86 </div>
87 <div class="clr"></div>
88 </div>
89 </form>
90 <!--------register end--------->
91 </div>
92 </div>
93 </div>
94 </div>
95 </div>
96 <div class="login-bg"></div>
97 </body>
98 </html>
2接下來是樣式css
@charset "utf-8"; /*/////*登陸//////by liangguanyu/////*/ .js_login h1, h2, h3, h4, h5, h6, p, ul, li { padding: 0; margin: 0; list-style: none;
} .login-header { text-align: center; height: 30px; font-size: 24px; line-height: 30px;
} .js_login { display: none; position: fixed; opacity: 1; z-index: 11000; left: 50%; margin-left: -250px; top: 100px;
} .js_login a { color: blue; text-decoration: none;
} .sub_btn1 { /*position:absolute; right:0px; top:50px;*/ width:105px; height:35px; display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; align-content:center font: 15px/100% Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: white; /*#e8f0de*/ border: solid 1px #538312; background: #64991e; /* #64991e*/ background: -webkit-gradient(linear, left top, left bottom, from(#43CD80), to(#3CB371)); /*#7db72f #4e7d0e*/ background: -moz-linear-gradient(top, #7db72f, #4e7d0e); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
} .sub_btn1:hover { background: #538018; background: -webkit-gradient(linear, left top, left bottom, from(#2E8B57), to(#008B45)); background: -moz-linear-gradient(top, #6b9d28, #436b0c); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
} .inputbg { height: 40px; width: 280px; margin: 0 auto; margin-top: 20px; border-radius: 4px; border: 1px solid #eee; text-align: left; color: #333;
} #username * { vertical-align: middle;
} .inputsub { outline: 0; font-family: Tahoma,Geneva,sans-serif; font-size: 14px; width: 270px; float: left; border: none; text-align: left; color: #333; margin: 10px 0 3px 8px; background: none; overflow: hidden;
} .buttons { width: 280px; margin: 0 auto; margin-top: 25px; text-align: left;
} #login-submokaoba { width: 105px; height: 35px;
} #qql { float: right;
} .reg { padding: 20px; margin: 0 auto; width: 280px;
} #login { margin-top: 20px;
} .hidden { display: none;
} .js_login { position: absolute; width: 500px; background: #fff; display: none; color: #999;
} .js_login .js_title { overflow: hidden; height: 42px; background: #f9f9f9 url(http://www.jiao4.com/java) repeat-x; border-left: 1px solid #ccc; border-right: 1px solid #ccc;
} .js_login .js_title span { float: right; line-height: 40px; padding: 0 9px; cursor: pointer; font-family: ""; font-size: 30px;
} .js_login .js_title span:hover { color: #555;
} .js_login .js_title li { float: left; width: 130px; text-align: center; font-family: "微軟雅黑"; font-size: 18px; cursor: pointer; height: 43px;
} .js_login .js_title li a { float: left; width: 130px; text-align: center;
} .js_login .js_title li a:hover {
} .conxk1 { border-top: 3px solid #15B300; border-right: 1px solid #dfdfdf; background: #fff; height: 39px; line-height: 39px; color: #11B200;
} .conxk1 a { color: #11B200;
} .conxk1 a:hover { color: #11B200; text-decoration: none;
} .conxk2 { border-right: 1px solid #dfdfdf; height: 39px; line-height: 39px; padding-top: 3px; color: #646464;
} .conxk2 a { color: #646464;
} .conxk2 a:hover { color: #646464; text-decoration: none;
} .js_login .js_content { overflow: hidden; padding: 13px 15px; background: #fff; border: 1px solid #ccc; border-top-width: 0px;
} .js_login .js_content .de_list { width: 100%; padding-top: 12px;
} .js_login .js_content a:visited { color: blue;
} .js_login .js_content a:hover { color: red; text-decoration: underline;
} .Reg-input { display: block; clear: both; padding: 5px 0;
} .Reg-input li { display: inline; float: left;
} .Reg-input .input-text { width: 220px; height: 25px; border: 1px solid #ccc; outline: none; border-radius: 2px;
} .input-text:focus { border: 1px solid #339933;
} .Reg-input .Reg-text { width: 100px; text-align: right; font-size: 14px;
} .Reg-input .input_text { width: 70px; float: left;
} .js_login #checkbox { text-align: left;
} .js_login #errmsg { color: red;
} .js_login .sub_btn1 { font-size: 20px;
} #lean_overlay { position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background: #000; display: none;
}
后面更上js，記得要把jquery給加上哦！紅色區域的代碼負責登陸注冊點擊切換的事件，在代碼點擊方法加上黃色代碼可在點擊后加載到當前界面！
<script type="text/javascript"> $(function () { H_login = {}; H_login.openLogin = function () { $('.login-header a').click(function () { switchTag('_xka', '_xka_list', 1, 2, 'conxk1', 'conxk2'); $('.js_login').show(); $('.login-bg').show(); }); $('.login-header1 a').click(function () { switchTag('_xka', '_xka_list', 2, 2, 'conxk1', 'conxk2'); $('.js_login').show(); $('.login-bg').show(); }); }; H_login.closeLogin = function () { $('.close-login').click(function () { $('.js_login').hide(); $('.login-bg').hide(); }); }; H_login.loginForm = function () { }; H_login.run = function () { this.closeLogin(); this.openLogin(); this.loginForm(); }; H_login.run(); }); function switchTag(tag, content, k, n, stylea, styleb) { for (i = 1; i <= n; i++) { if (i == k) { document.getElementById(tag + i).className = stylea; document.getElementById(content + i).className = "showbox" } else { document.getElementById(tag + i).className = styleb; document.getElementById(content + i).className = "hidden" } } }; function ajaxlogin() { var username = $("#logusername"); var usernameValue = $("#logusername").val(); var password = $("#logpassword"); var passwordValue = $("#logpassword").val(); alert(usernameValue + passwordValue);
window.location.reload(); } function ajaxzhuce() { var usernameValue = $("#UserName").val(); var passwordValue = $("#Password").val(); var realNameValue = $("#RealName").val(); var telephoneValue = $("#Telephone").val(); var emailValue = $("#Mail").val(); alert(usernameValue + passwordValue + realNameValue + telephoneValue + emailValue);
window.location.reload(); } </script>
給大家看一下效果哈！
最后獻上demo：http://download.csdn.net/detail/nightmareyan/9590361