点击Button弹出登陆注册框
1 <div class="login-hidd"></div> 2 <div class="login-wrap"> 3 <div class="login-cont"> 4 <div id="qiehuan"> 5 <img id="login-img-close" src="image/close08.png" alt="登陆" title="工匠帮"> 6 <input type="button" name="login-button" id="login-button" value="登陆"/> 7 <input type="button" name="register-button" id="register-button" value="注册"/> 8 </div> 9 <div class="lx-input-all"> 10 <div class="login-div-tel"> 11 <span class="login-tip">手机号码：</span> 12 <input id="loginInputTell" type="text" class="login-input-tel defaultBorder"> 13 </div> 14 <div class="login-div-passwd"> 15 <span class="login-tip">密码：</span> 16 <input id="loginInputPwd" type="password" class="login-input-passwd "> 17 </div> 18 <div class="login-div-passwd2"> 19 <span class="login-tip">确认密码：</span> 20 <input id="loginInputPwd2" type="password" class="login-input-passwd "> 21 </div> 22 <div class="login-div-call"> 23 <span class="login-tip">联系人：</span> 24 <input id="loginInputCall" type="text" class="login-input-call"/> 25 </div> 26 <div class="login-div-qiye"> 27 <span class="login-tip">企业名称：</span> 28 <input id="loginInputQiYe" type="text" class="login-input-qiye" /> 29 </div> 30 <div class="login-div-check"> 31 <span >验证码：</span> 32 <input id="loginInputCheckNum" type="text" class="login-input-check "> 33 <a id="loginGetCheckNum">点击获取验证码</a> 34 </div> 35 </div> 36 <div class="login-div-submit"> 37 <button id="login-button-login">登陆</button> 38 <!-- <a id="login-button-register-tip">免费注册</a> --> 39 <button id="login-button-register">注册</button> 40 <a id="login-button-login-tip">已有账号，请点击此处登录！</a> 41 </div> 42 43 </div> 44 45 46 </div>
上面是HTML代码，以下是HTML点击事件标签
1 <a id="ei-index-masterLogin" href="#">商家入驻</a> 2 <a id="ei-index-toRegister" href="#">工人入驻</a>
以下是CSS
1 /*登陆弹出层*/ 2 .login-hidd{ 3 position:fixed; 4 top:0; 5 left:0; 6 width:100%; 7 height:100%; 8 background:#000; 9 opacity:0.8; 10 display:none; 11 } 12 .login-wrap{ 13 position:fixed; 14 top:0; 15 left:0; 16 width:100%; 17 height:100%; 18 display:none; 19 } 20 .login-cont{ 21 height:270px; 22 width: 400px; 23 border-radius: 0px; 24 margin: 200px auto; 25 border: 0px solid #000; 26 padding: 20px 0px; 27 font-size: 18px; 28 background: #fff; 29 position: relative; 30 /*background: #e1e5e5; 背景灰色*/ 31 } 32 #login-button{ 33 border:0px solid #FFFFFF; 34 /*background:#35ac2c;*/ 35 width:170px; 36 height:57px; 37 font-size: 21px; 38 text-align: left; 39 left: 0px; 40 position: relative; 41 top: -20px; 42 text-align: center; 43 } 44 #register-button{ 45 border:0px solid #FFFFFF; 46 /*background:#FFFFFF;*/ 47 width:170px; 48 height:57px; 49 font-size: 21px; 50 text-align: left; 51 left: 0px; 52 position: relative; 53 top: -20px; 54 text-align: center; 55 56 } 57 #login-img-close{ 58 position: absolute; 59 top: 20px; 60 right: 27px; 61 cursor: pointer; 62 } 63 .login-cont input{ 64 height:30px; 65 width:160px; 66 border:1px solid #ccc; 67 padding:0 10px; 68 font-size: 15px; 69 70 } 71 72 .login-cont button{ 73 width: 80px; 74 padding: 7px; 75 font-size: 16px; 76 margin-top: 30px; 77 } 78 .login-div-submit button{ 79 80 81 margin-right: 6px; 82 border: 0px solid #35ac2c; 83 background: #35ac2c; 84 color: #ffffff; 85 width: 280px; 86 display: block; 87 margin: 25px auto; 88 font-size: 21px; 89 border-radius: 0px; 90 cursor: pointer; 91 margin-top:60px; 92 } 93 .login-tip{ 94 display: inline-block; 95 text-align: right; 96 width: 120px; 97 } 98 .login-div-tel{ 99 margin:0 auto; 100 margin-bottom:10px; 101 padding-left:32px; 102 color:#4e4e4e; 103 padding-top:25px; 104 font-size: 21px; 105 106 } 107 108 109 .login-div-passwd{ 110 margin:0 auto; 111 margin-bottom:20px; 112 padding-left:32px; 113 color:#4e4e4e; 114 font-size: 21px; 115 116 } 117 .login-div-passwd2{ 118 /*display:none;*/ 119 margin:0 auto; 120 121 padding-left:32px; 122 color:#4e4e4e; 123 display: none; 124 font-size: 21px; 125 } 126 .login-div-call{ 127 margin:0 auto; 128 margin-top:8px; 129 margin-bottom:-15px; 130 padding-left:32px; 131 color:#4e4e4e; 132 display: none; 133 font-size: 21px; 134 } 135 .login-div-qiye{ 136 margin:0 auto; 137 margin-bottom:10px; 138 padding-left:32px; 139 color:#4e4e4e; 140 padding-top:25px; 141 font-size: 21px; 142 display: none; 143 } 144 .login-div-submit{ 145 margin:0 auto; 146 text-align:center; 147 } 148 .login-div-check{ 149 /*display:none;*/ 150 margin:0 auto; 151 152 padding-left:32px; 153 color:#4e4e4e; 154 padding-top:5px; 155 font-size: 21px; 156 display: none; 157 } 158 .login-div-check span{ 159 display:inline-block; 160 width:120px; 161 text-align:right; 162 } 163 #login-button-modifypwd{ 164 display:none; 165 } 166 #loginInputCheckNum{ 167 width: 88px; 168 } 169 #loginGetCheckNum{ 170 width: 87px; 171 height: 24px; 172 text-align: center; 173 line-height: 24px; 174 display: inline-block; 175 font-size: 12px; 176 padding-left: 4px; 177 padding-right: 4px; 178 padding-top: 3px; 179 padding-bottom: 3px; 180 background-color: #F1F1F1; 181 cursor: pointer; 182 } 183 #login-button-register{ 184 display: none; 185 width: 251px; 186 margin: 0 auto; 187 margin-top: 20px; 188 border: 1px solid #499d74; 189 background: #499d74; 190 color: #ffffff; 191 font-size: 18px; 192 cursor: pointer; 193 } 194 #login-button-register-tip{ 195 display: block; 196 color: #499d74; 197 margin-left: 252px; 198 font-size: 15px; 199 cursor: pointer; 200 width: 75px; 201 } 202 #login-button-login-tip{ 203 display:none; 204 color: #499d74; 205 margin-left: 164px; 206 font-size: 15px; 207 cursor: pointer; 208 }
以下是JS
1 /*首页点击登陆，弹出登陆界面*/ 2 3 /*弹出登陆窗口*/ 4 5 $('#ei-index-masterLogin').click(function(){ 6 //登陆窗口默认高度 7 $('.login-cont').css({'height':'270px'}); 8 //登陆窗口默认选择颜色&背景 9 $('input[name="login-button"]').css({ 10 'color':'#FFFFFF', 11 'background':'#35ac2c' 12 }); 13 $('input[name="register-button"]').css({ 14 'color':'#000000', 15 'background':'#FFFFFF' 16 }); 17 $('.login-hidd').show(); 18 $('.login-wrap').show(); 19 //登陆窗口切换事件 20 $('#qiehuan input').click(function(){ 21 var _this=$(this); 22 23 $('#qiehuan input').css({ 24 'background':'#FFFFFF', 25 'color':'#000000' 26 }); 27 _this.css({ 28 'color':'#FFFFFF', 29 'background':'#34a82b' 30 }); 31 switch(_this.attr('name')){ 32 case 'login-button': 33 34 $('#login-button-login').show(); 35 $('.login-div-check').hide(); 36 $('.login-div-call').hide(); 37 $('.login-div-qiye').hide(); 38 39 $('#login-button-register').hide(); 40 $('#login-button-login-tip').hide(); 41 42 $('#loginInputTell').css({'border':'1px solid rgb(208, 211, 222)'});//初始化手机号码输入框 43 $('#loginInputPwd').css({'border':'1px solid rgb(208, 211, 222)'});//初始化密码输入框 44 if(localStorage.getItem('eazTel')&&localStorage.getItem('eazPwd')) {//本地存储 , localStorage.getItem（'key'） 获取名为key的值 45 $('#loginInputTell').val(localStorage.getItem('eazTel')); 46 $('#loginInputPwd').val(localStorage.getItem('eazPwd')); 47 } else { 48 $('#loginInputTell').val(''); 49 $('#loginInputPwd').val(''); 50 } 51 break; 52 case 'register-button': 53 $('.login-cont').css({'height':'400px'}); 54 $('.login-hidd').show(); 55 $('.login-wrap').show(); 56 $('#login-button-login').show(); 57 58 59 $('.login-div-call').show(); 60 $('.login-div-qiye').show(); 61 $('.login-div-check').show(); 62 $('#login-button-login').hide(); 63 $('#login-button-register').show(); 64 $('#login-button-login-tip').hide(); 65 66 $('#loginInputTell').css({'border':'1px solid rgb(208, 211, 222)'});//初始化手机号码输入框 67 $('#loginInputPwd').css({'border':'1px solid rgb(208, 211, 222)'});//初始化密码输入框 68 $('#loginInputPwd2').css({'border':'1px solid rgb(208, 211, 222)'});//初始化确认密码输入框 69 $('#loginInputCall').css({'border':'1px solid rgb(208, 211, 222)'});//初始化联系人框 70 $('#loginInputQiYe').css({'border':'1px solid rgb(208, 211, 222)'});//初始化企业框 71 $('#loginInputCheckNum').css({'border':'1px solid rgb(208, 211, 222)'});//初始化验证码框 72 if(localStorage.getItem('eazTel')&&localStorage.getItem('eazPwd')) {//本地存储 , localStorage.getItem（'key'） 获取名为key的值 73 $('#loginInputTell').val(localStorage.getItem('eazTel')); 74 $('#loginInputPwd').val(localStorage.getItem('eazPwd')); 75 } else { 76 $('#loginInputTell').val(''); 77 $('#loginInputPwd').val(''); 78 } 79 break; 80 }; 81 }); 82 83 84 }); 85 $('#register-button').click(function(){ 86 87 88 89 }); 90 /*关闭登陆窗口*/ 91 $('#login-img-close').click(function(){ 92 $('.login-hidd').hide(); 93 $('.login-wrap').hide(); 94 $('.modify-div-pwd').hide(); 95 $('.login-div-passwd').show(); 96 }); 97
