Fancybox onComplete - 定位工作瞬间答案

【问题标题】：Fancybox onComplete - Positioning works for a split secondFancybox onComplete - 定位工作瞬间
【发布时间】：2012-02-06 09:41:35
【问题描述】：

我正在尝试定位 Facebook 应用程序中禁用滚动的 fancybox。

onComplete 函数在返回帧的垂直中心之前工作了几分之一秒。是什么让它弹回中心？

$("#footer-test-link").fancybox({
    "transitionIn"  : "fade",
    "transitionOut" : "fade",
    "speedIn" : 300,
    "speedOut" : 300,
    "easingIn" : "fade",
    "easingOut" : "fade",
    "type": "ajax",
    "overlayShow" : true,
    "overlayOpacity" : 0.3,
    "titleShow" : false,
    "padding" : 0,
    "scrolling" : "no",
    "onComplete" : function() {
        $("#fancybox-wrap").css({"top": 80 +"px"});
    }
});

【问题讨论】：

标签： jquery facebook iframe fancybox facebook-iframe

【解决方案1】：

只需尝试设置 '#fancybox-wrap' 的 css 属性，如下所示

#fancybox-wrap {
    top: 80px !important;
}

!important-option 确保 jQuery 或其他 JavaScript 无法更改/覆盖此 css 设置。

【讨论】：

【解决方案2】：

FancyBox 会在瞬间显示您的定位，因为在将 FancyBox 包装器 (#fancybox-wrap) 垂直居中的事件与 onComplete 回调之间存在race condition。 onComplete 通常会先完成，因此css({"top": 80 +"px"}) 然后会被覆盖。您可以尝试多种方法来解决此问题，但我更喜欢在完成时添加 CSS 规则，而不是像算法的解决方案那样强制每个 FancyBox 的位置。

'onComplete' : function () {
    // Create a pseudo-unique ID - this is actually pretty weak and you may want to use a more involved method
        var dt = new Date();
        var className = ('cl'+dt.getTime()).substr(0,10); // Create a unique class name
    // Create a style element, set the contents, and add it to the page header
        var style = document.createElement('style');
        jQuery(style).attr('type','text/css').html('.'+className+' { top: 80px !important; }').appendTo(jQuery('head'));
    // Add the pseudo-unique class name to the FancyBox wrapper to apply the CSS
        jQuery('#fancybox-wrap').addClass(className);
}

您可能想为此查看better unique id，但这足以满足我的需求。请注意，这个答案是关于 FancyBox v1.x（我使用的是 v1.3.4）。 v2.x 可能有不同的逻辑流程，并且有不同的回调。在 v2.x 中，您需要根据 FancyBox docs 使用 afterLoad 或 afterShow，而不是使用 onComplete。

【讨论】：