javascript - 当条件满足时，fancybox beforeclose 允许关闭

Question

我有一个花式框，它打开一个 iFrame，用户可以在其中修改表单数据。我想这样做，如果试图关闭fancybox，则会询问用户是否希望保存所做的任何更改。我想使用带有“是”、“否”和“取消”按钮的 jQuery UI 对话框来执行此操作。这个对话框是使用fancybox beforeClose 回调生成和显示的。我已经能够通过返回false来防止fancybox在显示对话框时关闭，我的问题是，我现在如何关闭fancybox？使用 $.fancybox.close() 只会再次触发 fancybox beforeClose 回调（循环）。

我的代码：

$.fancybox.open({
    href:'/index.php?task=details_movie',
    type:'iframe',
    padding:10,
    minHeight: '90%',
    beforeClose: function() {
        if ($("#dialog-confirm").length == 0) {
            $("body").append('<div id="dialog-confirm" title="Save changes?"><p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Do you wish to save any changes made to the details of this movie?</p></div>');
            $("#dialog-confirm").dialog({
                modal:true,
                buttons: [ 
                    { 
                        text: "Yes", 
                        click: function() { 
                            alert("Yes"); // perform save actions
                            $("#dialog-confirm").remove();
                        } 
                    },
                    { 
                        text: "No", 
                        click: function() { 
                            $.fancybox.close(); // this creates the loop back to beforeClose callback
                            $("#dialog-confirm").remove();
                        } 
                    },
                    { 
                        text: "Cancel", 
                        click: function() { 
                            $("#dialog-confirm").remove();
                            return false;
                        } 
                    }
                ]
            });
            $(".ui-widget-overlay").css({"z-index": 99999});
            $(".ui-dialog").css({"z-index": 100000});
        }
        return false;
    }
});

Answer 1

阅读下面的帖子后，我已经能够对我的代码进行以下更改以达到预期的结果：

我怎样才能阻止fancyBox关闭？

1. 从使用 beforeClose 回调更改为 afterShow 回调
2. 来自fancybox关闭按钮的未绑定点击事件
3. 使用包含我之前的 beforeClose 函数的函数为 fancybox 关闭按钮创建了一个新的单击事件

这样，fancybox 关闭按钮现在将触发 jQuery UI 对话框，并且根据在此对话框中选择的按钮，现在可以触发 $.fancybox.close() 函数，而不会像我最初的问题那样触发 beforeClose 循环。

我还禁用了使用转义键关闭fancybox 的功能，以强制用户单击关闭按钮。

我更新的代码：

$.fancybox.open({
    href:'/index.php?task=details_movie',
    type:'iframe',
    padding:10,
    minHeight: '90%',
    keys : {
        close  : null // prevent close on escape pressed
    },
    afterShow: function() {
        $(".fancybox-close").unbind(); // unbind events from close button
        $(".fancybox-close").click(function() { // create own click event
            if ($("#dialog-confirm").length == 0) {
                $("body").append('<div id="dialog-confirm" title="Save changes?"><p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Do you wish to save any changes made to the details of this movie?</p></div>');
                $("#dialog-confirm").dialog({
                    modal:true,
                    buttons: [ 
                        { 
                            text: "Yes", 
                            click: function() { 
                                // perform save functions
                                $("#dialog-confirm").remove();
                                $.fancybox.close();
                            } 
                        },
                        { 
                            text: "No", 
                            click: function() { 
                                $("#dialog-confirm").remove();
                                $.fancybox.close();
                            } 
                        },
                        { 
                            text: "Cancel", 
                            click: function() { 
                                $("#dialog-confirm").remove();
                            } 
                        }
                    ]
                });
                $(".ui-widget-overlay").css({"z-index": 99999});
                $(".ui-dialog").css({"z-index": 100000});
            }
        });
    }
});