Fancy Zoom 弹层登录

Posted

很喜欢Fancy Zoom 插件的弹出效果，这里拿来做个ajax登录，源码没有ajax功能，我在做些改动，下面是demo和教程。

demo | 源码

废话不多说，首先下载 Fancy Zoom 源码，下载后里面有3个demo。我们只要里面的images包和js。

html源码

在head标签里引入必要的js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><!--jquery包-->
<script type="text/javascript" src="js/fancyzoom.js"></script><!--fancy zoom 包-->

绑定对象JS，这里参数{scaleImg: true} 表示内容弹出效果，自己可以试验下。

<script charset="utf-8" type="text/javascript">
        $(document).ready(function() {
          $('#login_link').fancyZoom({scaleImg: true});
     });
</script>

 

body里的主要代码,注意区分加载的ID和绑定对象的ID，不要写错了。详细看代码

<div id="msg">
        <a href="index.html">demo1</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index2.html">demo2</a>
       <!-- href="#login" 加载ID为login的内容 -->
        <a href="#login" id="login_link"><h1>登录</h1></a>
        <p>点击上面的登录，弹出登录层<br/>登录用户名和密码都是123456<br/>输入的用户名和密码正确弹出提示（自动关闭登录层）<br/>输入的用户名和密码不正确弹出提示（不会关闭登录层）<br/>弹出登录层的情况下，对空白地方双击关闭登录层</p>
 </div>
    <!-- 弹出层的内容 -->
   <div id="login">
        <form name="loginform" id="loginform" action="" method="post" onsubmit="login_ajax(this);return false;">
        <p>
           <label for="user_login">用户名:123456<br />
          <input type="text" name="log"  value="" size="20" /></label>
        </p>
      <p>
           <label for="user_pass">密码:123456<br />
            <input type="password" name="pwd" value="" size="20" /></label>
     </p>
      <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> 记住我的登录信息</label></p>
       <p class="submit">
          <input type="submit"  value="  登录   "/>
       </p>
      </form>
   </div>
    <!-- 弹出层的内容 over-->

Fancy Zoom的关闭按钮默认是在左边，可能有些不习惯，我们在这里修改下fancyzoom.js。在$('body').append(html);上面加上下面的代码。绑定的时候加上相应参数即可

/*修改关闭按钮位置*/
if(options.close_right == true) html = html.replace('left','right');//by83  关闭按钮放置在右边
/*修改关闭按钮位置over*/
$('body').append(html);

 

这里很重要，在空白处单击事件关闭层改为双击，不然无法使用。代码修改如下

$('html').dblclick(function(e){if($(e.target).parents('#zoom:visible').length == 0) hide();});//by83 原来的单击改成双击

ajax_login.PHP文件


$log = $_POST['log'];
$pwd = $_POST['pwd'];
if(login()){
 echo json_encode(1);
}else {
 echo json_encode(0);
}
function login(){
  global $log,$pwd;
   if($log=='123456' && $pwd=='123456') return true;
   return false;
}

本内容为原创，转载请注明出处 by83

Comments are closed.