FancyBox v2 - login box

问题

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.

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;
    });

回答1:

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

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

回答2:

In your code, you need to change href : "#login_form" to be href : "#login_form_ajax".

来源：https://stackoverflow.com/questions/11296373/fancybox-v2-login-box

标签

jquery

fancybox