如何讓 jQuery UI 對話框占據整個窗口並根據窗口大小的變化動態調整？

Question

目前，我可以將width屬性設置為auto以獲取窗口的整個寬度，如果窗口大小發生變化（例如，重新調整瀏覽器窗口的大小或在不同的屏幕大小上顯示），它會動態調整自身。 示例： http : //jsfiddle.net/NnsN2/

但是，我無法獲得相同的height 。 它始終是適合內容的最小高度，即使我已嘗試將其設置為auto 。

首先獲取窗口高度（ $(window).height() ）並將其用於height的常用方法在這里不起作用，因為它將是靜態的並且不會動態適應窗口大小的變化。

如何使高度始終占據窗口的完整高度並能夠適應窗口大小的變化？

Answer 1

您可以嘗試在運行時獲取元素的#id或.class ，然后根據窗口寬度和高度制作寬度/高度：

$(window).resize(function () {
   $('.ui-dialog').css({
        'width': $(window).width(),
        'height': $(window).height(),
        'left': '0px',
        'top':'0px'
   });
}).resize(); //<---- resizes on page ready

結帳小提琴

Answer 2

以下是我如何為 jQuery UI Ver 1.8.17“解決”這個問題：

打開對話后，假設您已捕獲其 id，請使用以下命令：

$("#DlgID").parent().css('height', $(window).height());

實際高度由包含對話內容的<div>的父級決定，因此是參考。 您還可以使用此方法來控制父級的其他屬性。

快樂編碼！

Answer 3

您可以使用jquery 插件：

$("#demo").dialog({
   width: 500,
   height: 300,
   dialogClass: "dialog-full-mode" /*must to add this class name*/
 });
 //initiate the plugin
 $(document).dialogfullmode();