Javascript/Jquery Callback for Fancybox 是 否 确认

Javascript/Jquery Callback for Fancybox Yes No Confirm

本文关键字：确认 Fancybox for Jquery Callback Javascript      更新时间：2023-09-26

我正在尝试实现一个花哨的"是否"确认，但我在根据需要使回调工作时遇到问题。下面的示例使用 Fancybox v2。

下面代码的问题在于，单击"测试"时HREF调用函数"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>

> 每当用户单击链接时，您的方法"do_something（'a'， 'b'）"将被执行，返回的结果将作为第二个参数传递给"fancyConfirm"方法。这就是为什么你的参数"回调"总是"未定义"的原因。

fancyBox 还有一个问题 - "afterClose"回调被调用两次 - 在打开之前和关闭之后（这将在下一个版本中更改）。

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

不是双回调方法的忠实粉丝（对不起 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论坛上的帖子，为我指明了正确的方向。

更新：

现在扩展了我的示例以使用动态构建的按钮和自定义返回值，因此您不仅限于 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);
        }
    });
}

添加了 jsfiddle 示例

相关文章：