Fancybox onComplete - позиционирование работает за доли секунды

Question

Я пытаюсь расположить причудливый ящик, который находится внутри приложения Facebook, с отключенной прокруткой.

Функция 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

Просто попробуйте установить свойство css для '#fancybox-wrap' следующим образом

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

! важный-параметр гарантирует, что jQuery или другой JavaScript не сможет изменить / переопределить этот параметр CSS.

Answer 2

FancyBox показывает ваше позиционирование в течение доли секунды, потому что между событием, которое вертикально центрирует оболочку FancyBox, находится условие гонки (#fancybox-wrap) и обратный вызов onComplete. onComplete обычно заканчивается первым, поэтому css({"top": 80 +"px"}) затем переписывается. Вы можете попробовать любое количество способов исправить это, но я предпочитаю добавлять правило CSS на Complete, а не принудительно устанавливать положение каждого 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);
}

Возможно, вы захотите найти лучший уникальный идентификатор для этого, но этого было достаточно для моих нужд. Обратите внимание, что этот ответ относится к FancyBox v1.x (я использовал v1.3.4). v2.x может иметь другой логический поток, а DOES имеют разные обратные вызовы. Вместо использования onComplete, в v2.x вам нужно будет использовать afterLoad или afterShow в соответствии с документами FancyBox.