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例如