Fancybox 的 Javascript/Jquery 回调 是 否 确认

Javascript/Jquery Callback for Fancybox Yes No Confirm

提问by Paul Benbow

I'm trying to implement a fancy Yes No confirm and I'm having problems getting the callback to work as needed. The example below is using Fancybox v2.

我正在尝试实现一个花哨的 Yes No confirm 并且我在让回调根据需要工作时遇到了问题。下面的示例使用Fancybox v2。

The problem with the code below is that the function "do_something" is being call when HREF"Test" is clicked and not being called when the user clicks #fancyConfirm_ok.

下面代码的问题在于，HREF单击“测试”时正在调用函数“do_something”，而在用户单击时不会调用函数“do_something” #fancyConfirm_ok。

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>

回答by Janis

Your method "do_something('a', 'b')" will be executed whenever user clicks on the link and the returned result will be passed as the second parameter to the "fancyConfirm" method. This is why your parameter "callback" is always "undefined".

您的方法“do_something('a', 'b')”将在用户点击链接时执行，返回的结果将作为第二个参数传递给“fancyConfirm”方法。这就是为什么您的参数“回调”始终为“未定义”的原因。

There is also a problem with fancyBox - "afterClose" callback gets called twice - before opening and after closing (this will be changed in the next release).

FantasyBox 也有一个问题——“afterClose”回调被调用两次——在打开之前和关闭之后（这将在下一个版本中改变）。

I would bind a click event on the link and call a callback when user clicks on one of the buttons, like - http://jsfiddle.net/xcJFY/1/

我会在链接上绑定一个单击事件并在用户单击其中一个按钮时调用回调，例如 - http://jsfiddle.net/xcJFY/1/

回答by Lankymart

Not a big fan of the double callback method (Sorry Janis).

不是双重回调方法的忠实粉丝（抱歉 Janis）。

So while trying to find a solution to this myself played around with similar code and found that as long my return value wasn't defined inside the scope of the function it works fine, when my return value was defined inside the function I would get weird behaviour where it would work for a time then revert to undefined.

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

Effectively the return value needs to be outside the scope of the function, global, closure etc.

实际上，返回值需要在函数、全局、闭包等的范围之外。

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

Here is a jsfiddleexample

这是一个jsfiddle例子

Thanks to Francisco Diazwho's poston Google Groups FancyBox forumpointed me in the right direction.

感谢Francisco Diaz，他在Google Groups FancyBox 论坛上的帖子为我指明了正确的方向。

UPDATE:

更新：

Have now extended my example to use dynamically built buttons and custom return values, so you are not just limited to true and false.

现在扩展了我的示例以使用动态构建的按钮和自定义返回值，因此您不仅限于 true 和 false。

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

Added jsfiddleexample

添加jsfiddle示例