Fancybox onComplete - 定位工作瞬间

Posted 2023-05-09

【中文标题】Fancybox onComplete - 定位工作瞬间

【英文标题】：Fancybox onComplete - Positioning works for a split second

【发布时间】：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");
    
);

【参考方案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。