FancyBox v2 – 登录框

我已经厌倦了所有的例子： – 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" 。