Question

我已经知道并且通过以下所有示例： - http://fancyapps.com/fancybox/

制作弹出式登录框没有任何帮助我。

我已经检查了旧版本的Fancybox 1.3.x，其中有一个登录框示例，但该方法并不适用于新的Fancybox v2。

如果有人能帮助我，我会很高兴。

到目前为止，我有这个代码，它是半工作的：

$("#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;
    });

Answer 1

对于v2.x，这可行（注意我已注释掉了哪些选项）

$(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。

Answer 2

在您的代码中，您需要将href : "#login_form"更改为href : "#login_form_ajax"。

FancyBox v2 - 登录框

2 个答案: