fancybox beforeClose 问题

Question

我在 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 秒并关闭 fancybox。这是通过使用window.parent.$.fancybox.close();完成的，请参阅下面的详细代码

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

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

有办法区分吗？

Answer 1

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

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

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

当从 iframed 页面调用时，此函数将关闭 fancybox（从父页面本身） AND 将启用（先前定义的) closedFromIframe flag, 所以不是这个:

$.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。

Answer 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?')
            }
        })
    });

fancybox beforeClose 问题

fancybox beforeClose issue

javascript

iframe

jquery

fancybox

fancybox-2