IT基地

css样式

.login_main{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  display: none;
}
 
.login{
  width: 360px;
  left: 50%;
  top: 50%;
  position: fixed;
  z-index: 1001;
  margin-left: -180px;
  margin-top: -240px;
  background: #fff;
}
 
.login_close{
  position: absolute;
  height: 24px;
  line-height: 24px;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
 
.login_top{
  width: 300px;
  float: left;
  margin-top: 24px;
  margin-left: 30px;
}
 
.login_logo{
  width: 88px;
  height: 39px;
  float: left;
}
 
.login_title{
  height: 39px;
  line-height: 39px;
  font-size: 16px;
  float: left;
  margin-left: 10px;
}
 
.login_input{
  width: 300px;
  float: left;
  margin-left: 30px;
  margin-top: 20px;
}
 
.input_list{
  width: 100%;
  height: 42px;
  line-height: 42px;
  border: 1px solid #dedede;
  float: left;
  margin-top: 20px;
  text-indent: 1em;
}
 
.input_button{
  width: 100%;
  height: 46px;
  line-height: 46px;
  background: #94252a;
  color: #fff;
  border: 0;
  font-size: 16px;
  margin-top: 32px;
  font-weight: 600;
  cursor: pointer;
}
 
.login_bottom{
  width: 100%;
  height: 60px;
  line-height: 60px;
  float: left;
  background: #dedede;
  margin-top: 50px;
  font-size: 14px;
}
 
.lg_left{
  float: left;
  margin-left: 30px;
  cursor: pointer;
}
 
.lg_right{
  float: right;
  margin-right: 30px;
  cursor: pointer;
  text-decoration: underline;
}
 
.show2{
  display: none;
}

html代码

<div class="login_main">
  <div class="login">
    <img src="/public/new_mulitpc/image/close.png" class="login_close" onclick="hideLogin()">
    <div class="login_top">
      <img src="/public/new_mulitpc/image/logo2.png" class="login_logo">
      <div class="login_title show1">·&nbsp;&nbsp;&nbsp;用户登录</div>
      <div class="login_title show2">·&nbsp;&nbsp;&nbsp;用户注册</div>
    </div>
    <div class="login_input">
      <input type="text" name="username" placeholder="用户名" class="input_list username">
      <input type="text" name="password" placeholder="密码" class="input_list password">
      <input type="text" name="password2" placeholder="重复密码" class="input_list password2 show2">
      <button class="input_button show1" onclick="login()">登录</button>
      <button class="input_button show2" onclick="reg()">确认注册</button>
    </div>
    <div class="login_bottom">
      <!-- <div class="lg_left">QQ登录</div> -->
      <div class="lg_right show1" onclick="regShow()">立即注册</div>
      <div class="lg_right show2" onclick="loginShow()">已有账号，登录</div>
    </div>
  </div>
</div>

js代码

//显示隐藏登录注册弹窗
  function showLogin(){
    $('.login_main').show();
  }
  function hideLogin(){
    $('.login_main').hide();
  }
  function regShow(){
    $('.show1').hide();
    $('.show2').show();
  }
  function loginShow(){
    $('.show1').show();
    $('.show2').hide();
  }
  //注册
  function reg(){
    var username = $('.username').val();
    var password = $('.password').val();
    var password2 = $('.password2').val();
    if(username==''){
      layer.msg('用户名不可为空',{icon:2,time:1500});
      return false;
    }
    if(username.length<6){
      layer.msg('用户名长度需大于6位',{icon:2,time:1500});
      return false;
    }
    if(password==''){
      layer.msg('请输入密码',{icon:2,time:1500});
      return false;
    }
    if(password2==''){
      layer.msg('请重复输入密码',{icon:2,time:1500});
      return false;
    }
    if(password!=password2){
      layer.msg('2次输入的密码不一致',{icon:2,time:1500});
      return false;
    }
    $.post("{:url('reg')}",{
      username:username,
      password:password,
    },function(data){
      if(data.code==200){
        layer.msg(data.msg,{icon:1,time:1500});
        setTimeout(function(){
          location.reload();
        },1500);
      }else{
        layer.msg(data.msg,{icon:2,time:1500});
      }
    });
  }
  //登录
  function login(){
    var username = $('.username').val();
    var password = $('.password').val();
    if(username==''){
      layer.msg('请输入用户名',{icon:2,time:1500});
      return false;
    }
    if(password==''){
      layer.msg('请输入密码',{icon:2,time:1500});
      return false;
    }
    $.post("{:url('login')}",{
      username:username,
      password:password,
    },function(data){
      if(data.code==200){
        layer.msg(data.msg,{icon:1,time:1500});
        setTimeout(function(){
          location.reload();
        },1500);
      }else{
        layer.msg(data.msg,{icon:2,time:1500});
      }
    });
  }