刷新jquery ui對話框位置

Question

我正在使用jquery對話框。 該對話框的內容是動態的，因此對話框打開時高度會改變。

$("#a_div").dialog({ width: 400 }); 

該對話框最初出現在頁面的中心。但是當身高變化不再是中心時。

如何在不關閉的情況下刷新對話框的位置並重新打開它？

感謝

Answer 1

你需要做重新設置的位置：

$("#a_div").dialog({ 
    position: { 'my': 'center', 'at': 'center' } 
}); 

創建對話框時的位置設置一次，但事後被改變（或者只是重新設置爲相同的值，強迫jQuery的重新計算）。

看到這個演示：如果你想使用的確切位置設置爲初始定位使用jQuery UI的http://jsfiddle.net/petermorlion/3wNUq/2/

Answer 2

您可以嘗試通過JQuery的使用它的類來調整對話框直接（documentation here）

jQueryUI的對話框的基本結構是這樣的：

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"> 
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
     <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span> 
     <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a> 
    </div> 
    <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog"> 
     <p>Dialog content goes here.</p> 
    </div> 
</div> 

所以，也許你應該玩類的寬度和高度來設置最好的。

另一種方案是直接打開（當你的數據加載成功）之前設置對話框的寬度：

$("#a_div").dialog({ width: 400 }); 

$.get('my_url.php',function(data){ 

    $('#a_div .ui-dialog').css('width','400px'); 

    // Or... 

    $('#a_div').css('width','400px'); 
}); 

我希望它可以幫助你。

Answer 3

，你可以抓住從jQuery UI代碼的選項，並再次使用任何你想要的時間重新定位您的對話框。

function refreshDialogPosition(id) { 
    $("#" + id).position({ 
         my: "center", 
         at: "center", 
         of: window, 
         collision: "fit", 
         // Ensure the titlebar is always visible 
         using: function (pos) { 
          var topOffset = $(this).css(pos).offset().top; 
          if (topOffset < 0) { 
           $(this).css("top", pos.top - topOffset); 
          } 
         } 
        }); 
} 

用途：

refreshDialogPosition("YourDialogId"); 

這也將確保您的標題欄始終可見。否則，當使用內容較大的對話框時，標題欄將出現在屏幕外。 （內容高度>窗口高度）

祝您有愉快的一天。