fancybox beforeClose issue答案

【问题标题】：fancybox beforeClose issuefancybox 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 我已经在问题中添加了代码以便更好地解释

标签： javascript jquery iframe fancybox fancybox-2

【解决方案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?')
            }
        })
    });

【讨论】：