Fancybox onComplete-定位可瞬间进行

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属性，如下所示

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

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

Answer 2

FancyBox暂时显示您的位置，因为在垂直居中FancyBox包装器（ #fancybox-wrap ）与onComplete回调之间的事件之间存在竞争条件 。 onComplete通常会先完成，因此css({"top": 80 +"px"})随后会被覆盖。 您可以尝试多种方法来解决此问题，但是我更喜欢在Complete上添加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);
}

您可能想要为此找到更好的唯一ID ，但这足以满足我的需求。 请注意，此答案与FancyBox v1.x有关（我使用v1.3.4）。 v2.x可能具有不同的逻辑流程，并且DOES具有不同的回调。 在v2.x中，您需要按照FancyBox docs使用afterLoad或afterShow来代替onComplete。