摘要：
将destoon系统默认的登录功能修改成快速弹窗式登录，对系统默认的界面进行了美化。对于出错的提示信息也在当前页面显示，大幅度提升了用户的体验度！此登录插件可安装destoon系统下任意页面中，快来体验下吧......

上次艺灵分享了《jquery.ajax实战之弹出层式快速注册特效》。今天，艺灵将分享快速登录的完整源码。

插件特点及功能：
1.destoon系统任意页面中可引用快速登录功能；
2.当前页面提示错误信息，避开了系统默认的跳转页面显示错误信息；

也许看官早已迫不及待的想要这个插件了，不急不急。只要看官看完这篇教程文章，你也可以实现想要的！还是先来张静态效果图吧，快速登录弹出后的界面图：

是不是与上次的注册的点像？没错！都是一个框架，只是现在是登录，并不是注册。

一、静态demo演示

1.html源码

<!--快速登录按钮-->
<a class="c-e70012 register-new" data-type="other" data-class="new-loginw">点我快速登录</a>
<!--弹出快速登录框-->
<div class="new-loginw register3" data-type="other" style="display:none">
<form action="" method="post" class="login-form">
　<p class="nl-tit">快 速 登录</p>
　<p class="msg-ts">公共场合不建议自动登录，以防账号丢失</p>
　<p class="du-placeholder p-list "><i class="ico-new_100_100 in-pw"></i><input type="text" name="username" id="username_1" class="du_login_input username_1" placeholder="昵称/会员名"><i class="ico-new_100_100 in-msg in-error" data-register="register3" ></i></p>
　<p class="du-placeholder p-list"><i class="ico-new_100_100 in-pw"></i><input type="password" name="password" id="password_1" class="du_login_input password_1" placeholder="密码"><i class="ico-new_100_100 in-msg in-error" data-register="register3" ></i></p>
　<p class="nl-list p-list">验证码：<input name="captcha" id="captcha" type="text" size="6" placeholder="输入右侧验证码" class="f_gray" style="width: 150px;"/> <img src="../api/captcha.png.php?action=image" title="验证码,看不清楚?请点击刷新 字母不区分大小写" alt="" align="absmiddle" id="captchapng" style="cursor:pointer;"/><span id="ccaptcha"></span></p>
　<p><a href="send.php" class="fr">忘记密码?</a><label for=""><input type="checkbox" name="" id="" value="" checked="">自动登录</label></p>
　<p class="m10 none">其他登录：{loop $OAUTH $k $v}
{if $v[enable]}<a href="{DT_PATH}api/oauth/{$k}/connect.php" title="{$v[name]}"><img src="{DT_PATH}api/oauth/{$k}/ico.png" alt="{$v[name]}"/></a>  {/if}
{/loop}</p>
　<p class="tc p-list"><input type="button" name="submit" value="登录" class="gybtn input-sub" id="input-sub" data-register="register3" style="width: 100%;" /></p>
　<p><a href="/member/register.php" class="fr">立即注册</a></p>
</form>
<div class="pop-gydel-login gydel" title="关闭" data-way="0" data-bg="1" data-effect="0">×</div>
</div>

1.css源码

<style type="text/css">
*{margin: 0;padding: 0;}
input{outline: none;}
body{background: #fff;font-size: 12px; font-family: "微软雅黑";}
.none{display: none!important;}
.tc{text-align: center;}
/*ico*/
.ico-new_100_100{background:url(http://www.wowobao.com/skin/wowobao_skin/images/ico-new_100_100.png) no-repeat;display:inline-block}
/*快速注册+登录弹出框*/
.new-loginw{width:360px;height:380px;padding:20px;background:#fff;border-radius:10px;position:fixed;left:50%;top:50%;margin:-200px 0 0 -190px;z-index:99999}
.new-loginw .p-list{margin:15px auto;height:40px;display:block}
.nl-tit{font-family:"Microsoft YaHei";font-size:24px;text-align:center;color:#292929;border-bottom:1px solid #939393;padding-bottom:10px;font-weight:bolder}
.msg-ts{padding:20px 0 5px;text-align:center}
.nl-list .ico-new_100_100{float:left}
.nl-list input[type="text"]{width:225px;height:38px;line-height:38px;border:1px solid #e2e2e2}
.in-username{background-position:0 -450px;width:50px;height:40px}
.in-userpw{background-position:0 -500px;width:50px;height:40px}
.span-number{font-size:24px;color:#e60012}
.new-loginw .du-placeholder{position:relative;z-index:1;overflow:hidden;background-color:#eee;border:1px solid #dcdcdc;    width: auto;    padding-left: 45px;}
input.du_login_input{height:40px;line-height:40px;color:#666;width:100%;background-color:#fff;float:right;border:0 !important;text-indent:2px}
.in-name{background-position:-17px -615px}
.in-pw{background-position:-17px -715px}
.new-loginw .in-name,.new-loginw .in-pw{margin-top:-10px;width:16px;height:19px;top:50%;position:absolute;left:14px}
.code_1{float: left;}
.ils-yzm{float: right;}
.gydel{position:absolute;right:0;top:0;font:24px SimSun;color:#333;width:60px;height:60px;line-height:60px;text-align:center;font-weight:bolder;-webkit-transition:.6s;transition:.6s;cursor:pointer}
.gydel:hover{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.gybtn{width:120px;display:inline-block;height:40px;line-height:40px;background:#53A1F3;text-align:center;color:#fff !important;border-radius:3px;cursor: pointer;border: none;}
/*弹出遮罩背景层*/
.pop-gybg{position:fixed;top:0px;left:0px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));width:100%;height:100%;z-index:10000;display:none;background-color:#000;background-color:rgba(0,0,0,.5);}
/*提示信息*/
.m-msg{position:absolute;left: 0;top:20px;color:#fff; width:100%;font-size: 14px; text-align: center;height:0; display: none;z-index: 99999999;}
.msg{background: #000;padding:10px 50px; }
.register-new{display: inline-block;margin: 300px 300px 50px 300px;cursor: pointer;font-size: 20px;}
</style>

静态页面已经完工了，接下来我们需要用js和php来实现后续步骤。先来说php吧，这个修改的代码比较少。

二、修改php文件

这里一共需要修改两个php文件。第一个是：login.inc.php，完整路径为：网站根目录/module/member/login.inc.php。用dreamweaver、Hbuilder、记事本等编辑工具打开文件后开始修改。

第55行左右新增代码

/*20151225新增，添加一个返回值用于ajax判断，param为ajax中的一个参数，避免与系统的提示信息冲突。*/
if($_POST['param']==1){exit('ok');}

第71行左右修改代码

/*20151225修改*/
if($_POST['param']==1){
　exit($do->errmsg);
}else{
　message($do->errmsg);
}

代码配图： 

此时我们已经可以实现想要的效果了，但还不完善。因为验证码有点坑......

上面提到的坑点就是：验证码已过期。这个条件并不在login.inc.php文件中，而是在global.func.php文件中。下面接着修改php文件。

global.func.php文件完整路径：网站根目录/include/global.func.php

第735行左右修改代码

/*20151225新增  艺灵设计*/
if($_POST['param']==1){
　$msg = lang('include->captcha_expired');
　exit('验证码已过期');
}else{
　$msg = lang('include->captcha_expired');
　return $return ? $msg : message($msg);
}

代码配图： 

好了，这下终于搞完了。至于js，代码就不粘贴了，js及php等演示页面已经打包在压缩包中，需要的看官可以使用积分下载哦！

资源下载

demo演示jquery.ajax实战之弹出层式快速登录插件demo.zip　积分下载，不喜勿下。

三、解压后的代码如何使用

对于理解能力不是很强并且又想实现快捷登录功能的看官，建议下载吧，不过需要积分。解压后包内有这些文件，如图：
以下是各文件的说明：ajax_login.html里面是一个快捷登录的按钮及登录框架，
ajax_login.js包含弹出与关闭特效、判断验证码、用户名长度及为空等情况、发送登录请求及在原页面显示返回的错误信息，
login.inc.php是原destoon的登录文件，只是在里面添加了两处传出值，
global.func.php是原destoon的系统文件，里面增加了一个判断验证码过期的传出值。

基本上，按照本教程的方法修改，都能实现快速登录功能。当然了，看官也可以直接将ajax_login文件夹放于网站根目录中测试效果。如果看官想更换目录及修改文件，在使用过程中需要注意版本号等其它情况。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-12-26/351.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。