jQuery - 對話框自動調整動態內容並保持中心位置

我有一個jQuery對話框，並使用Ajax加載內容。jQuery - 對話框自動調整動態內容並保持中心位置

對話框最初位於頁面的中心。問題在於，由於它的動態內容，數據的大小是未知的。所以，當我獲得大量數據時，對話框只會在底部增長，即對話框在底部展開，頂部仍處於相同位置。

我要的是

當數據被加載時，對話框應能在兩個方向（上，下）擴展，使內容無需滾動可見。

來源

2012-06-27 madhairsilence

嘗試調用「$ （「#dialog」）.dialog（{}）;「每次ajax更新後？ –

@madhairsilence：如果您發現我的答案很好，請考慮將其作爲「已接受」。這將使其對未來的訪問者更加明顯。謝謝！ – DaveWut

這個問題已經有一個答案，標記爲 – madhairsilence

默認對話框是絕對相對定位的。

該對話框可能會擴展自動高度，但是當頁面滾動時，對話框會自動重新定位。

做到這一點的唯一方法是，通過

position : ['center',<distance from top>]

在Window應用這些樣式對話框

位置對話框通過使用CSS樣式
固定位置
.fixed-dialog { position:"fixed" }
添加這個類的對話框

dialogClass : 'fixed-dialog'

因此，該對話框看起來像

$('#dialog-div').dialog({ 
     position : ['center',10], 
     dialogClass: "fixed-dialog" 
    });

來源

2013-01-03 04:53:40 madhairsilence

爲什麼'['center'，10]'中的'10'？ – Kehlan

無我在互聯網上找到滿足我，而我一直在尋找的答案在解決方案。即使這個沒有。在閱讀了更多關於JQuery API文檔後，I found something really interesting。正如這個網頁所描述的，你可以綁定一個事件，在ajax請求完成它的工作之後，它將被執行。事情是，這不是簡單的;正如我在做自己的測試時，使用API文檔中提供的示例，我無法使其工作。看起來像我的JQuery對話框不存在「未來」的上下文方式。

這使我this page其描述爲： 附加的事件處理程序的當前選擇現在和將來匹配這，所有的元素。找到這導致我創建一個函數像這樣的：

$(document).live("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
});

瞧！它像一個魅力！ ajax請求完成後，位置屬性將更改並適應div的內容及其尺寸！

希望它可以幫助未來的人！

編輯：您可能想使用函數「.on（）」而不是「.live（）」。自從我寫答案的時候起，就好像函數「.live（）」在版本1中被刪除了。jQuery的9個，並由新的取代。 jQuery的> = 1.9的用戶提供更合適的解決辦法是這樣的：

$(document).on("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
});

來源

2013-07-24 21:38:22 DaveWut

Use this 
    modal: true, 
    width: '80%', 
    autoResize:true, 
    resizable: true, 
    position: { 
     my: "center top", 
     at: "center top", 
     of: window 
    }

順序必須是相同

來源

2015-07-27 11:44:55 Moitt

什麼是autoResize？你能參考文檔嗎？ – showdev

autoresize是一個內置的屬性，你可以爲你的模態窗口，它是布爾類型。 – Moitt

我沒有在[documentation]（http://api.jqueryui.com/dialog/）中看到它。你能指導我嗎？謝謝 – showdev

我使用這個函數：

function centerDialog(id){ 

    var d = $('#'+id).closest('.ui-dialog'), 
     w = $(window); 

    d.css({ 

    'top':(w.height()-d.outerHeight())/2, 
    'left':(w.width()-d.outerWidth())/2 

    }); 

}

來源

2016-01-07 11:37:24 gadlol

jQuery - 對話框自動調整動態內容並保持中心位置

回答

相關問題