位置的fancybox 2手動

我不能爲我的生命，找出我如何可以重新定位的fancybox 2使用left: 47px;和top: 147px位置的fancybox 2手動

我通過源代碼閱讀，無盜號的，我不明白一種覆蓋定位的方式。

將autoCenter設置爲false只會在第一次停止自動對中後停止自動對中。

使用jQuery來改變CSS，或者給一個自定義的包裝器來應用CSS也不起作用，因爲Fancybox總是添加內聯CSS來覆蓋我所有的嘗試。

有沒有辦法告訴Fancybox停止自己定位並使用我的絕對定位？

來源

2012-03-29 bafromca

你可以用記錄不完整的'helpers：'選項來做。如果我能找到確切的代碼，我會將它作爲答案發布。 – Sparky 2012-03-29 19:52:54

我沒有找到任何東西。我不認爲你想做的是一個沒有編輯插件源代碼的選項。如果你打算這樣做，那麼你可以簡單地添加額外的定位選項，以便至少該插件保持可擴展性。 – Sparky 2012-03-29 20:08:57

您可以使用!important修飾符0123'樣式。

對於使用的fancybox情況下，下面將覆蓋JavaScript的定位：

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

來源

2012-03-29 19:53:40 leepowers

被Fancybox 2使用jQuery的css（）注入的內聯CSS覆蓋。 – bafromca 2012-03-29 19:59:50

這很奇怪 - '！重要'應該重寫任何內聯樣式，包括使用'css（）'設置的樣式 - 請參閱http://jsfiddle.net/YKhEG/ - 也許'＃fancybox-wrap'是錯誤的選擇器？ – leepowers 2012-03-29 20:12:51

就是這樣：它是.fancybox-wrap。你是對的，這就是我所需要的。謝謝！ – bafromca 2012-03-29 20:39:28

不能更改CSS像這樣？顯然改變margin屬性來「頂」和「左」

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

來源

2012-03-29 20:41:09 gerl

我通過手動添加一個新的CSS類的beforeShow處理程序解決了這個問題。我用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; 
});

來源

2012-06-11 14:31:26

我想你不能改變的CSS以這種方式，引起的fancybox核心是所有編輯＃的fancybox外包裝的樣式屬性時間。所以你必須添加一個新的類，就像我之前描述的例子。否則，您將看不到任何視覺改變。

來源

2012-10-02 12:20:02

我有類似的問題 - 我想手動定位fancybox，但它會自動重新居中。

我解決它禁用中心功能：

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

來源

2013-02-24 04:11:54

我發現這個解決方案fancybox2。您可以覆蓋默認的_getPosition方法以防止更改一個或多個維度。

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

來源

2014-11-30 22:19:19 TractorCow

這是一個不錯的解決方案。你如何得到這個將fancybox放在觸發器元素的頂部，並稍微向右偏移20px？你的代碼示例中'onlyAbsolute'是什麼意思？ – 2015-06-15 21:44:26

盧卡斯特謝拉是對的！這對我有效。首先關閉中心函數，然後使用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>

來源

2016-03-01 17:14:15

位置的fancybox 2手動

回答

相關問題