Положение Fancybox 2 вручную

Question

Я не могу ради своей жизни выяснить, как я могу изменить положение Fancybox 2, чтобы использовать left: 47px; и top: 147px

Я читаю исходный код, и без взлома его я неНе вижу способа переопределить позиционирование.

Установка значения autoCenter в значение false останавливает автоцентрирование только после того, как первый раз это сделает.CSS или предоставление пользовательской обертки для применения CSS тоже не работает, потому что Fancybox всегда добавляет встроенный CSS, который переписывает все мои попытки.

Есть ли способ сказать Fancybox прекратить позиционирование и использоватьмое абсолютное позиционирование?

Answer 1

Вы можете переопределить встроенные стили CSS , используя модификатор !important.

Для случая использования Fancybox следующее переопределит позиционирование JavaScript:

.fancybox-wrap { 
  top: 147px !important; 
  left: 47px !important; 
}

Answer 2

Я решил эту проблему, добавив вручную новый css-класс в beforeShow-Handler.Я использовал fancybox2.

css:

.fancybox-wrap22 {
  top: 22% !important;
}

js:

$(".open_fancybox").click(function() {
  $.fancybox.open('<h1>lorem ipsum</h1>', {
    beforeShow : function() {
      $('.fancybox-wrap').addClass('fancybox-wrap22');
    }
  });
  return false;
});

Answer 3

Я нашел это решение для fancybox2.Вы можете переопределить метод _getPosition по умолчанию, чтобы предотвратить изменение одного или нескольких измерений.

// Disable vertical repositioning
var orig = $.fancybox._getPosition;
$.extend($.fancybox, {
    _getPosition: function(onlyAbsolute) {
        var rez = orig(onlyAbsolute);
        delete rez.top;
        return rez;
    }
});

Answer 4

Лукас Тейшейра был прав! Это сработало для меня. Сначала отключите центральную функцию, затем используйте событие onComplete, чтобы установить встроенный CSS, как вы хотите.

   <script>
        jQuery(document).ready(function () {

            //turn off center function
            $.fancybox.center = function () { };

            //use onComplete event to modify inline css 
            $("#ModalPopup").fancybox({
                'modal': true,
                'onComplete': function () {
                    $("#fancybox-wrap").css({ 'left': '250px', 'top': '150px' });
                }
            });

        });
   </script>   

Answer 5

У меня похожая проблема - я хочу разместить fancybox вручную, но он автоматически перецентрируется.

Я решил, отключив функцию центра:

$.fancybox.center = function(){};

Answer 6

Полагаю, вы не можете изменить CSS таким образом, потому что ядро ​​fancybox постоянно редактирует свойство style в # fancybox-wrap. Поэтому вы должны добавить новый класс, как в моем примере. В противном случае вы не увидите никаких изменений в visuell.

Answer 7

Разве вы не можете изменить CSS так?Очевидно изменение свойства поля на «верхний» и «левый»

$("a.fancybox1").fancybox({
 'hideOnContentClick': false,
         'onComplete'    :   function() {
            $("#fancybox-wrap").css('margin', 'auto');
        }
    });