官网的登陆注册每次要跳转到另一个界面，能不能做一个简单的，在界面弹出一个框框登陆，我想了想做了这么一个案例，大家来看看成不成
贴上代码，实现了在同一个弹出窗上加载了登陆注册功能！可自由点击！当然样式丑了一些！还请见谅！demo在下面
1这里是html内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery鼠标点击弹出登录框代码</title> </head> <body> <br><br><br><br><br><br><br> <div><a href="javascript:void(0);">点击，弹出登录框</a></div> <div><a href="javascript:void(0);">点击，弹出登录框</a></div> <div> <div> <ul> <li> 用户登录 </li> <li> 快速注册 </li> </ul> <span>×</span> </div> <div> <div> <div> <div> <!----------login start------> <div> <div> <input type="text" value="输入用户名" placeholder="输入用户名" /> </div> <div> <input placeholder="输入密码" type="password" value="" /> </div> <div> <input type="button" value="登 录" /> </div> <div></div> <div> 忘记密码？<a href="https://www.mokaoba.com/">找回密码</a> <span></span> </div> </div> <!--------login end---------> </div> </div> <div> <div> <!--------register start---------> <form method="post" enctype="multipart/form-data"> <input type="hidden" value="register" /> <input type="hidden" value="1" /> <div> <ul> <li>用户名：</li> <li><input type="text" required="" /> <span></span></li> </ul> <ul> <li>密码：</li> <li><input onblur="CheckReg('Password', this.value)" type="password" required="" /> <span></span></li> </ul> <ul> <li>重复密码：</li> <li><input onblur="CheckReg('repassword',this.value)" type="password" required="" /> <span></span></li> </ul> <ul> <li>真实姓名：</li> <li><input onblur="CheckReg('RealName', this.value)" type="text" required="" /> <span></span></li> </ul> <ul> <li>手机号码：</li> <li><input onblur="CheckReg('Telephone', this.value)" type="text" required="" /> <span></span></li> </ul> <ul> <li>E-mail：</li> <li><input onblur="CheckReg('Mail', this.value)" type="text" required="" /> <span></span></li> </ul> <ul> <li> </li> <li><input type="checkbox" /> 我已阅读并接受《<a href="https://www.jb51.net/http:/www.jiao4.com/javascript" target="_blank">服务条款</a>》</li> </ul> <div></div> <div> <input type="button" value="注 册" /> <span></span> </div> <div></div> </div> </form> <!--------register end---------> </div> </div> </div> </div> </div> <div></div> </body> </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() 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给加上哦！红色区域的代码负责登陆注册点击切换的事件，在代码点击方法加上黄色代码可在点击后加载到当前界面！