Question

我有一个打开iFrame的fancybox，用户可以在其中修改表单数据。我想这样做，以便如果试图关闭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

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

How can I stop a fancyBox from closing?

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

通过这种方式，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});
            }
        });
    }
});

fancybox beforeclose允许在满足条件时关闭

1 个答案: