Fancybox的Javascript/jquery回调是否确认

Question

我试图实现花哨是没有确认，我有问题得到回调工作，如果需要。以下示例使用Fancybox v2。

下面的代码的问题是，当单击HREF“测试”，并且当用户单击#fancyConfirm_ok时未调用功能“do_something”正在调用。

function fancyConfirm(msg,callback) { 
    var ret; 
    jQuery.fancybox({ 
     'modal' : true, 
     'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyconfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>", 
     'afterShow' : function() { 
      jQuery("#fancyconfirm_cancel").click(function() { 
       ret = false; 
       //jQuery.fancybox.close(); 
       $.fancybox.close(); 
      }) 
      jQuery("#fancyConfirm_ok").click(function() { 
       ret = true; 
       jQuery.fancybox.close(); 
      }) 
     }, 
     'afterClose' : function() { 
      if (typeof callback == 'function'){ 
       callback.call(this, ret); 
      } else { 
       var callback_type = typeof callback; 
       alert(callback_type); 
      } 
     } 
    }); 
} 
<a href="#" onclick="fancyConfirm('Are you sure you want to delete?', do_something('a', 'b'));return false;">Test</a> 

Answer 1

你的方法“do_something（‘A’，‘B’）”每当链路和返回的结果上用户点击将作为第二个参数为“fancyConfirm”方法被传递将被执行。这就是为什么你的参数“回调”总是“未定义”。

fancyBox也存在问题 - “afterClose”回调会在打开之前和关闭之后调用两次（这将在下一版本中更改）。

我会绑定链接的点击事件，当用户点击一个按钮，像调用回调 - http://jsfiddle.net/xcJFY/1/

Answer 2

双回调方法（Sorry Janis）不是一个大风扇。

所以，当试图找到这个解决方案时，我自己玩过类似的代码，发现只要我的返回值没有在函数范围内定义，它就可以正常工作，当函数内部定义了返回值我会得到奇怪的行为，它会在一段时间后恢复到未定义状态。

有效的返回值必须是功能，全球性的，封闭的范围等

$(document).ready(function() { 
    $(".fancybox").on("click", function(e){ 
     e.preventDefault(); 
     confirm("Do you wish to continue?", true, function(resp) { 
      alert("You clicked " + resp); 
     }); 
    }); 
}); 

function confirm(msg, modal, callback) { 
    $.fancybox("#confirm",{ 
     modal: modal, 
     beforeShow: function() { 
      $(".title").html(msg); 
     }, 
     afterShow: function() { 
      $(".confirm").on("click", function(event){ 
       if($(event.target).is(".yes")){ 
        ret = true; 
       } else if ($(event.target).is(".no")){ 
        ret = false; 
       } 
       $.fancybox.close(); 
      }); 
     }, 
     afterClose: function() { 
      callback.call(this, ret); 
     } 
    }); 
} 

这里是一个jsfiddle例如

感谢Francisco Diaz谁在Google Groups FancyBox forum的post指出我的方向正确。

UPDATE：

现在已经扩展我的例子中使用动态生成的按钮和定制的返回值，这样你就不会仅仅局限于真假。

$(document).ready(function() { 
    $(".fancybox").on("click", function(e){ 
     e.preventDefault(); 
     confirm("Do you wish to continue?", { 
       /* 
       Define your buttons here, can handle multiple buttons 
       with custom title and values 
       */ 
       buttons: [ 
        { class: "yes", type: "button", title: "Yes", value: "yes" }, 
        { class: "no", type: "button", title: "No", value: "no" }, 
        { class: "maybe", type: "button", title: "Maybe?", value: "maybe" } 
       ], 
       modal: true 
      }, 
      function(resp) { 
       alert("You clicked " + resp); 
      } 
     ); 
    }); 
}); 

function confirm(msg, options, callback) { 
    $.fancybox("#confirm",{ 
     modal: options.modal, 
     beforeShow: function() { 
      this.content.prepend("<p class=\"title\"></p>"); 
      $(".title").html(msg); 

      for (i = 0; i < options.buttons.length; i++) { 
       this.content.append($("<input>", { 
        type: "button", class: "confirm " + options.buttons[i].class, 
        value: options.buttons[i].title 
        }).data("index", i)); 
      } 
     }, 
     afterShow: function() { 
      $(".confirm").on("click", function(event){ 
       ret = options.buttons[$(event.target).data("index")].value; 
       $.fancybox.close(); 
      }); 
     }, 
     afterClose: function() { 
      this.content.html(""); 
      callback.call(this, ret); 
     } 
    }); 
} 

新增jsfiddle例如