【问题标题】: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。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多