Question

我正在尝试定位禁用滚动的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"});
    }
});

Answer 1

尝试设置'#fancybox-wrap'的css-property，如下所示

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

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

Answer 2

FancyBox正在显示您的定位，因为在FancyBox包装器（#fancybox-wrap）和onComplete回调之间垂直居中的事件之间存在race condition。 onComplete通常会先完成，因此css({"top": 80 +"px"})会被覆盖。你可以尝试任何方法来解决这个问题，但我更喜欢在onComplete上添加一个CSS规则，而不是像algorhythm的解决方案那样强制每个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可能具有不同的逻辑流，并且DOES具有不同的回调。在v2.x中，您不需要使用onComplete，而是需要根据FancyBox docs使用afterLoad或afterShow。

Fancybox onComplete - 定位工作瞬间完成

2 个答案: