昨天公司说官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!demo在下面1这里是html内容 1 <!DO ...
昨天公司说官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成
贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!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 ="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.cnblogs.com//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>
原标题:jquery完成界面无刷新加载登陆注册
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。