jQuery：中心fancybox在視口

我目前使用fancybox版本2來顯示我的圖片時，單擊縮略圖，但我似乎無法讓fancybox坐在視口的中間，垂直說，因爲水平它是精細。jQuery：中心fancybox在視口

我已經嘗試了不少東西，這是最新的：

CSS

.fancybox-wrap { 
    position: fixed !important; 
    top: 50px !important; 
}

jQuery的

jQuery(document).ready(function() { 
    $(".fancybox-wrap").css("position", "absolute"); 

    // fancybox initialisation etc 

}); 


$(window).scroll(function() { 
    $('.fancybox-wrap').css('top', $(this).scrollTop() + "50px"); 
});

有沒有人有什麼想法？

來源

2012-08-22 martincarlin87

您使用的是Fancybox V2嗎？此處的演示頁面（http://fancyapps.com/fancybox/）似乎可以在兩個軸上均正常工作。你能給你的頁面提供一個鏈接嗎？ –

嗨@BillyMoat，我會，但它是在一個開發服務器和IP限制：/ 也，我認爲花式框基於頁面尺寸居中，但我需要基於瀏覽器的實際視口中心，因爲我正在使用它在一個非常高的facebook畫布應用程序頁面中，取決於當前的滾動位置，您需要向上/向下滾動以適應視口中的圖像 – martincarlin87

$(window).bind('resize', function() { 
    var top = ($(window).height()/2) - ($(".fancybox-wrap").outerHeight()/2); 
    var left = ($(window).width()/2) - ($(".fancybox-wrap").outerWidth()/2); 
    $(".fancybox-wrap").css({ top: top, left: left}); 
}).trigger('resize');

http://jsfiddle.net/aGhxK/23/

來源

2013-04-23 03:14:08 Sreedhar

這臺left和top使用position: absolute dinamically：

http://jsfiddle.net/aGhxK/1/

來源

2012-08-22 15:16:14

Hi @Vitor Ussui，感謝您的回答，我認爲您的答案工作正常但它看起來好像fancybox是基於頁面總高度而居中而不是運行視口高度？ – martincarlin87

然後，您只需將'$（window）'更改爲'$（document）'。問題是如果你不在頁面中間，你將看不到它（假設它比視口高）。在這種情況下，嘗試這個[http://jsfiddle.net/aGhxK/5/](http://jsfiddle.net/aGhxK/5/），所以即使向下滾動，該框也將始終居中。 –

最新的小提琴是完美的，但由於某種原因，我的燈箱仍然在頁面中間，但當我向上或向下滾動它不停留在視口，不知道爲什麼...... – martincarlin87

你需要做的唯一的事情是增加網站的CSS

html, body {height: 100%;}

和fancybox將定位在屏幕中心而不是頁面中心的圖像。

來源

2017-08-24 05:49:34

jQuery：中心fancybox在視口

回答

相關問題