FancyBox v2-登录框 [英] FancyBox v2 - login box

问题描述

我已阅读并仔细阅读了以下所有示例: - http://fancyapps.com/fancybox/

I've readed and went trough all examples on: - http://fancyapps.com/fancybox/

创建弹出式登录框没有任何帮助.

There is nothing to help me with making a pop-up login box.

我检查了旧版本的Fancybox 1.3.x，其中有一个登录框示例，但是该方法在新的Fancybox v2上实际上不起作用.

I've checked the old version Fancybox 1.3.x which have an example for login box, but that method doesn't really work on new Fancybox v2.

如果有人可以帮助我，我会很高兴的.

If anyone can help me, I will be happy.

到目前为止，我已经有了这段代码，它是半工作的:

So far I have this code, which is semi-working:

$("#top-login-button").click(function() {
        $.fancybox.open({
            href : "#login_form",
            padding : 0,
            onClosed : function() {
                    $("#login_error").hide();
            }
        });
    });

    $("#login_form_ajax").bind("submit", function() {

        if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
            $("#login_error").show();
            return false;
        }

        $.fancybox.showActivity();

        $.ajax({
            type        : "POST",
            cache   : false,
            url     : "/login.php",
            data        : $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });

        return false;
    });

推荐答案

对于v2.x，此方法有效(注意，我注释掉了更改的选项)

For v2.x this would work (notice that I commented out what options were changed)

$(document).ready(function() {
 $("#top-login-button").click(function() {
  $.fancybox({
   href : "#login_form",
   padding : 0,
   // it was onClosed for v1.3.4
   afterClose : function(){
    $("#login_error").hide();
   }
  }); // fancybox
 }); //click

 $("#login_form_ajax").bind("submit", function() {
  if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
   $("#login_error").show();
   $.fancybox.update(); // it was $.fancybox.resize(); for v1.3.4
   return false;
  }
  $.fancybox.showLoading(); // it was $.fancybox.showActivity(); for v1.3.4
  $.ajax({
   type   : "POST",
   cache  : false,
   url    : "/login.php",
   data   : $(this).serializeArray(),
   success: function(data) {
    $.fancybox(data);
   }
  });
  return false;
 }); // bind
}); // ready

更新(2012年8月10日):添加了 DEMO 怀疑论者.

UPDATE (Aug 10, 2012): Added a DEMO for the skeptics.

这篇关于FancyBox v2-登录框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！