昨天公司說官網的登陸註冊每次要跳轉到另一個界面，能不能做一個簡單的，在界面彈出一個框框登陸，我想了想做了這麼一個案例，大家來看看成不成 貼上代碼，實現了在同一個彈出窗上載入了登陸註冊功能！可自由點擊！當然樣式醜了一些！還請見諒！demo在下麵 1這裡是html內容 2接下來是樣式css 後面更上js ...
昨天公司說官網的登陸註冊每次要跳轉到另一個界面，能不能做一個簡單的，在界面彈出一個框框登陸，我想了想做了這麼一個案例，大家來看看成不成
貼上代碼，實現了在同一個彈出窗上載入了登陸註冊功能！可自由點擊！當然樣式醜了一些！還請見諒！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
