javascript - 制作打开的fancybox模态

Question

我有一个带有两个按钮的 Fancybox：合并和取消。Cancel 关闭fancybox，Merge 发布一个表单并等待页面重新加载。页面重新加载需要几秒钟，因此在用户按下合并后，我禁用了取消按钮，我想将选项设置为modal，true但我似乎找不到在已打开的选项上设置选项的方法花式盒子。有人对如何做到这一点有任何建议吗？

游乐场：http: //jsfiddle.net/vCtVq/

Answer 1

没有简单的选项来切换“模态”状态，fancyBox 要么是模态的，要么不是模态的。但我可以想到两种解决方案。

1）隐藏关闭按钮并取消绑定覆盖上的点击事件 -

$('#merge').click(function() {
    $('#cancel').attr("disabled", "disabled");

    $('.fancybox-item').hide();
    $('.fancybox-overlay').unbind();

    console.log('submit');
});

演示 - http://jsfiddle.net/am8d3/

2）创建一个全局变量，并使用“beforeClose”回调检查它。您可以通过返回“false”来取消关闭 -

var busy = false;

$(".o").fancybox({
    //modal: true
    beforeClose: function() {
        if (busy) {
            return false;
        }
    }
});

演示 - http://jsfiddle.net/MLjAT/

Answer 2

当函数运行时，Fancybox 会被初始化一次，我很确定不能用不同的选项重新初始化。您可以做的是创建一个标志并使用一些更传统的 javascript 来控制关闭行为。从一开始就将 modal 设置为 true，而是使用正文单击事件处理关闭。然后，设置一个真/假标志来确定是否单击了合并以允许或不允许窗口在正文单击时关闭。像这样的东西：

$('body').click(function(e) {    
    if (allowClose == true) {
        $.fancybox.close();
    }
})​

我已经更新了你在这里摆弄这个解决方案。