FancyBox v2 - login box

Question

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

Answer 1

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

Answer 2

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.