js登录弹出框插件

第一步：页面引入css：<link rel="stylesheet" type="text/css"" href="common/css/loginAjax.1.0.css">

css范例：

/**
* @description 页面登录弹出框样式
* @page 目前支持宇航所有页面
* @author maohuidong
* @date 2017-06-07
*/

/*登录框样式*/
.loginDiv {
position: fixed;
5.8rem;
left: 50%;
top: 50%;
margin-top: -1.9rem;
margin-left: -2.9rem;
z-index: 101;
background-color: #048fbe;
border-radius: 10px;
text-align: center;
padding-top: 0.45rem;
font-size: 0.28rem;
display:none;
}

.loginDiv p{
color: #fff;
line-height: 0.45rem;
height: 0.9rem;
padding: 0 0.2rem;
}

.loginDiv p input{
height: 0.5rem;
padding: 0.1rem;
border-radius: 0.08rem;
background: #fff;
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

.loginDiv p label{
display: inline-block;
1.2rem;
text-align: right;
}

/*登录信息提示*/
.loginDiv .msg{
color: #fff;
line-height: 0.45rem;
height: 0.9rem;
padding: 0 0.2rem;
display:none;
}

/*登录按钮*/
.loginDiv .btn{
position: absolute;
100%;
height: 0.88rem;
left: 0;
bottom: 0;
background-color: #fff;
border-radius: 0 0 10px 10px;
}

.login-dialog-mask{
top: 0%;
left: 0%;
100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 9;
position: fixed;
display: block;
}

第二步：页面引入js：<script type="text/javascript" src="common/js/loginAjax.1.0.js"></script>

<script type="text/javascript" src="common/js/jquery.js"></script>

js 核心代码：

/***************************************************************************************************************
* @description jquery ajax请求的封装，V1.0版本用户app宇航页面session失效弹出登录框
* @page 使用页面：目前支持宇航所有页面
* @author maohuidong
* @date 2017-06-07
**************************************************************************************************************/
var login = {
//默认参数
opts:{
type:"post",
url:"",
data:"",
dataType:"json",
success:function(){},
error:function(){}
},
//弹出框模板
loginTemplete:"<div id='loginDiv' class='loginDiv'><p><label>用户名：</label><input type='text' id='name' name='name'/> </p> <p><label>密码：</label><input type='password' id='passwd' name='passwd' /> </p> <p id='msg' class= 'msg'></p> <p><input type='submit' class='btn' onclick='ytek.login();' value='登录' /></p> </div><div class='login-dialog-mask'></div>",
//宇航弹出框模板
starLoginTemplate: "<div class='dia-bluetipwrap-only'>"+
" <div class='dia-bluetip-only'>"+
" <div style='margin:0.04rem 0rem 0rem 0rem; color:#000; font-size:0.35rem;'>用户登录</div>"+
" <div class='shutdown'><img src='common/image/loginBox/shut-down.png'></div> "+
" <div class='g-wrap login-tc'>"+
" <p id='msg' class= 'msg'></p>"+
" <div class='member-form-tc'>"+
" <div class='box-sizing'>"+
" <div class='group-item'>"+
" <span class='bgicon tbu'></span>"+
" <input maxlength='11' type='text' id='name' class='name' placeholder='账号 / 手机号' "+
" onkeypress='javascript:if(event.keyCode < 48 || event.keyCode > 57) event.returnValue=false;' />"+
" <a href='javascript:void(0);' onclick='ytek.emptyLoginName();'><span class='user-icon user-empty' onclick='ytek.emptyLoginName()'></span></a>"+
" </div>"+
" <div class='group-item item'>"+
" <span class='bgicon tbp'></span>"+
" <input maxlength='16' onpaste='return false;' type='password' id='passwd' name='passwd' placeholder='密码' onkeypress='javascript:if(event.keyCode == 32) event.returnValue=false; '>"+
" <a href='javascript:void(0);' onclick='ytek.emptyLoginPwd();' ><span class='user-icon pwd-empty' onclick='ytek.emptyLoginPwd()'></span></a><span class='user-icon eye close' onclick='ytek.switchPwdDisplay()'></span>"+
" </div>"+
" <input type='submit' value='登录' class='lblue-btn' onclick='ytek.login();'> "+
" </div>"+
" </div>"+
" </div> "+
" </div>"+
" </div><div class='login-dialog-mask'></div>",
//ajax请求封装，session失效时，弹出登录框
ajax:function(params){
var _this = this;
var params = $.extend({},this.opts,params);
$.ajax({
type:params.type,
url:params.url,
data:params.data,
dataType:params.dataType,
success:function(data){
//用户验证失败
if(typeof data == "string" && data.indexOf("loginError") > 0 ){
data = JSON.parse(data);
}
//loginError = -1 时，代表服务端ajax请求验证失败
if(data != null && data.loginError == "-1"){
var html = _this.starLoginTemplate;
if($("body .dia-bluetipwrap-only").size() > 0){
$("body .dia-bluetipwrap-only").remove();
}
$("body").append(html);
//绑定事件：点击非弹框区域，弹框消失
_this.loginRemove();
//绑定事件：取消登录框
_this.loginClose();
$('.login-dialog-mask').show();
$(".dia-bluetipwrap-only").show(300);
if(params.success){
params.success(null);
}
return;
}
//用户验证通过，成功返回
if(params.success){
params.success(data);
}
},
error:function(){
if(params.error){
params.error();
}
}
});
},
//当前页面弹出的登录框登录
login:function(){
var userName = $(".dia-bluetipwrap-only #name").val().trim();
var passwd = $(".dia-bluetipwrap-only #passwd").val().trim();
if(userName == "" || passwd == ""){
$(".dia-bluetipwrap-only #msg").text("用户名或密码不能为空");
$(".dia-bluetipwrap-only #msg").show(100);
return;
}
//登录验证
this.ajax({
type:"post",
url:"userLoginIos_timeoutLogin.action",
data:{"userName":userName,"passwd":passwd},
dataType:"json",
success:function(data){
if(data != null && typeof data.loginError != "undefined" && data.loginError != null){
if(data.loginError == "-2"){
$(".dia-bluetipwrap-only #msg").text("用户名或密码不能为空");
}
if(data.loginError == "-3"){
$(".dia-bluetipwrap-only #msg").text("用户名或者密码错误");
}
if(data.loginError == "-4"){
$(".dia-bluetipwrap-only #msg").text("账号已失效");
}
$(".dia-bluetipwrap-only #msg").show(100);
return ;
}
$(".dia-bluetipwrap-only #msg").text("登录成功,2秒后自动消失");
$(".dia-bluetipwrap-only #msg").css({"color":"#048fbe"});
$(".dia-bluetipwrap-only #msg").show(100);
setTimeout(function(){
$(".dia-bluetipwrap-only").hide(300,function(){
$('.login-dialog-mask').remove();
$(".dia-bluetipwrap-only").remove();
});
},2500);
},
error:function(){
$(".dia-bluetipwrap-only #msg").text("登录失败");
}

});
},
//点击遮罩层，移除登录框
loginRemove:function(){
$(document).on("click",function(e){
if($(e.target).closest('.dia-bluetipwrap-only').length == 0){
if($(".dia-bluetipwrap-only").css("display") == "block"){
$(".dia-bluetipwrap-only").hide(300,function(){
$('.login-dialog-mask').remove();
$(".dia-bluetipwrap-only").remove();
});
}
}
});
},
//关闭登录框
loginClose:function(){
$(".dia-bluetipwrap-only .shutdown").on("click",function(){
$(".dia-bluetipwrap-only").hide(300,function(){
$('.login-dialog-mask').remove();
$(".dia-bluetipwrap-only").remove();
});
});
},
//清空登录名
emptyLoginName:function(){
$(".dia-bluetipwrap-only #name").val("");
$(".dia-bluetipwrap-only #name")[0].focus();
},
//清空密码
emptyLoginPwd:function(){
$(".dia-bluetipwrap-only #passwd").val("");
$(".dia-bluetipwrap-only #passwd")[0].focus();
},
//是否明文显示密码切换
switchPwdDisplay:function(){
if($(".dia-bluetipwrap-only .eye.close").hasClass("close")){
$(".dia-bluetipwrap-only .eye.close").removeClass("close");
$(".dia-bluetipwrap-only #passwd").attr("type","text");
}else{
$(".dia-bluetipwrap-only .eye").addClass("close");
$(".dia-bluetipwrap-only #passwd").attr("type","password");
}
}
};

第三步：测试

login.ajax({
type:"post",
url:"loggingIos_findUserLoggingYears.action",
data:{"starId":_this.starId},
dataType:"json",
success:function(data){
if(data !== null && data.length > 0){
$("#year").empty();
$("#year").append("<option value=''>请选择</option>");
data.forEach(function(value,i){
$("#year").append("<option value='"+value+"'>"+value+"</option>");
});
}
},
error:function(){

}
});