jQuery UI對話框定位 - 如何使它保持居中

基本上我希望對話框在調整窗口大小（或切換到全屏窗口）時保持居中。jQuery UI對話框定位 - 如何使它保持居中

此外，該對話框是可拖動的，理想情況下，如果在調整窗口大小時仍然保留在頁面上的拖動位置，我更喜歡。但如果它重新回到中心，那麼我也會解決這個問題。

我試圖在「.ui-dialog」類上設置「position：relative」，但是這會在頁面底部產生一個很大的空白間隙;我一直無法弄清楚使用DOM檢查器工具造成這種情況的原因。

2010-06-22 GSTAR

你可以這樣說：

$("#dialog").dialog({ 
    drag: function() { 
     $.data(this, 'dragged', true); 
    }, 
    open: function() { 
     $.data(this, 'dragged', false);   
    } 
}); 
$(window).resize(function() { 
    $(".ui-dialog-content").each(function() { 
     if(!$.data(this, 'dragged')) 
      $(this).dialog('option', 'position', 'center'); 
    }); 
});

You can try out a demo here，這種重新中心在對話框上window.resize只是如果你還沒有拖它，因爲它是開放的。當我們打開時，我們將dragged的數據設置爲false，如果我們拖動它，將其設置爲true ...並且如果它仍然是false（尚未被拖動），則重新中心發生，否則我們將其保留單獨在它的當前位置。

好問題上的方式拖動檢測/想法，這會提高我目前工作的一個應用程序，要使用這個自己:)

來源

2010-06-22 23:49:45

感謝 - 這似乎工作正常，但仍然不是很那裏。我忘了提及我的容器div集中在頁面上（margin：0 auto）。這就是問題出現的原因。雖然容器div始終保持居中在頁面上，但對話框不會相對於容器停留。 – GSTAR 2010-06-23 00:17:22

@GSTAR - 如果是這種情況，您需要更改'$（this）.dialog（'option'，'position'，'center'）;'用代碼來定位對話框，有很多內置的位置，除此之外，您需要手動調整它。你可以在這裏看到有效的位置選項：http://jqueryui.com/demos/dialog/#option-position – 2010-06-23 00:25:43

是的，我已經嘗試了位置選項，然而問題在於它將對話框定位在窗口而不是容器分區。 I.E.如果我指定「位置：[350，150]」，則這些值是指窗口而不是容器。 – GSTAR 2010-06-23 00:34:37

jQuery UI對話框定位 - 如何使它保持居中

回答

相關問題