jQuery UI對話框位置固定中心

我試圖在固定位置的頁面中心以模式模式顯示對話框，但我無法使其正常工作。作爲解決方法，我目前設置了jQuery UI對話框位置固定中心

position: "top"

所以至少它固定在視口的頂部。當我使用中心選項時，它只是使用高度的50％作爲頂級屬性。由於我的頁面大約是7000像素，因此它遠離視口，用戶無法看到它。

有沒有人有如何實現這個好建議？我已經嘗試過CSS選項，但是由於top屬性是動態設置的，所以CSS根本沒有任何效果。

我也嘗試將它置於疊加層中，但由於ui-overlay元素在模式初始化之前不存在，所以我無法將它用作居中的射手。

只是僅供參考，我正在嘗試將此作爲定位hallojs鏈接小部件錯誤的解決方法。

來源

2014-01-13 juminoz

您可以嘗試使用'position：absolute; top：0;正確：0;底部：0;左：0;'在你的模態的CSS。這應該完美中心。 – Lawren

這不起作用。樣式設置在元素本身的html中，因此它完全覆蓋了CSS中的所有樣式。 – juminoz

您可以將它居中放置在窗口中。我做了一個jQuery方法來處理它。不知道爲什麼你需要它有一個固定的位置，除非你想讓用戶仍然能夠通過模態顯示來滾動窗口？這裏是jQuery中心擴展：

(function($) 
{ 
$.fn.centerMe = function(centerIn) 
{ 
    var containerWidth = $(centerIn).width(); 
    var containerHeight = $(centerIn).height(); 
    var elWidth = $(this).width(); 
    var elHeight = $(this).height(); 
    $(this).css('left', containerWidth/2 - elWidth/2); 
    var adjTop = containerHeight/2 - elHeight/2; 
    $(this).css('top', $(parent.window.document).scrollTop() + adjTop); 
}; 
})(jQuery);

用法是$（'＃myToBeCenteredElement'）。centerMe（window）;通常顯示的內容是：無;在頁面某處。您展示它並將其居中等。

要居中的元素需要有絕對定位。

我也使這另一個捕獲窗口滾動事件，並相應地進行調整。

來源

2014-01-13 20:00:44 kellycode

這似乎是一種解決方法，而不是解決方案。我想要實現的是使其相對於觸發它的按鈕進行定位。但是，該按鈕在該庫中的對話模式初始化之後纔可用。 – juminoz

jQuery UI對話框位置固定中心

回答

相關問題