fancybox beforeClose issue

Posted 2023-05-09

【中文标题】fancybox beforeClose issue

【英文标题】：

【发布时间】：2015-03-17 05:10:45

【问题描述】：

我有一个在fancybox（2.1.5 版）iframe 中实现的表单。人们可以选择不填写表格并点击“X”关闭fancybox表格，或者填写表格并点击注册。

我有一个 beforeClose 回调设置来设置 cookie 并做一些工作。但我希望只有当有人点击“X”或 Esc 键时才会触发它。见下面的代码

$.fancybox.open(
    type: "iframe",
    href: "/[url].php",
    autoSize: true,
    height: "auto",
    margin: 0,
    padding: 0,
    autoCenter: true,
    maxWidth: 460,
    maxHeight: 615,
    modal: false,
    iframe: 
        scrolling: "no"
    ,
    beforeClose: function () 
        //set cookie code
    ,
);

但是如果有人要注册，它会显示一条感谢消息 2 秒钟并关闭花式框。这是通过使用window.parent.$.fancybox.close(); 完成的，请参阅下面的详细代码

$.post('/register.php', post_vars, function(data) 
    window.parent.$.fancybox.close();
);

但是我不希望调用 beforeClose 事件以防我从 iFrame 关闭它，或者即使它被调用，我需要以某种方式知道它是从 iframe 完成的，而不是使用“X " 按钮。

有办法区分吗？

【问题讨论】：

你有代码吗？

@qamar 我已经在问题中添加了代码以便更好地解释

【参考方案1】：

我可以想出不同的方法来做到这一点，比如将自定义事件绑定到fancybox 关闭按钮或使用@987654322捕获escape键@或keypress等

我想最简单的方法是在父页面中创建一个自定义的关闭函数，比如：

var closedFromIframe = false;
function customClose() 
    closedFromIframe = true;
    jQuery.fancybox.close();

当从iframed 页面调用时，此函数将关闭fancybox（从父页面本身）AND 将启用（​​先前定义的）closedFromIframe 标志，所以不要这样：

$.post('/register.php', post_vars, function(data) 
    window.parent.$.fancybox.close();
);

...你可以这样做

$.post('/register.php', post_vars, function(data) 
    window.parent.customClose();
);

然后，在您的fancybox 脚本中，您可以在beforeClose 回调中验证closedFromIframe 的状态标志 并执行您需要的任何操作：

$.fancybox.open(
    // your API options
    beforeClose : function () 
        if (closedFromIframe) 
            // closed from iframe custom function
         else 
            // close button -or- escape key
        
    ,
    afterClose : function () 
        closedFromIframe = false; // reset flag
    
);

注意我们还在afterClose回调中重置closedFromIframe 标志。

查看此实现的DEMO。

【讨论】：

完美。非常感谢您的帮助

【参考方案2】：

只有当有人点击“X”或 Esc 键时才会触发

$(document).ready(function () 

$(".fancybox").fancybox(

            closeClick: false, // prevents closing when clicking INSIDE fancybox 
            openEffect: 'none',
            closeEffect: 'none',
            enableEscapeButton: false,
            helpers: 
                overlay: 
                    closeClick: false // prevents closing when clicking OUTSIDE fancybox 
                
            ,
            beforeClose: function () 
                return confirm('Are you sure?')
            
        )
    );