风扇箱在关闭前允许在条件满足时关闭

fancybox beforeclose allow close when condition met

本文关键字：条件 满足      更新时间：2023-09-26

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

我的代码：

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

在阅读了下面的帖子后，我已经能够对我的代码进行以下更改，以获得所需的结果：

如何阻止fancyBox关闭？

  1. 从使用beforeClose回调更改为afterShow回调
  2. 取消绑定fancybox关闭按钮的点击事件
  3. 为fancybox关闭按钮创建了一个新的点击事件，其中包含我以前的beforeClose函数

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

我还禁用了使用escape键强制用户单击关闭按钮来关闭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});
            }
        });
    }
});
相关文章：