如何使jQuery UI对话框占据整个窗口并动态调整窗口大小？

Question

目前，我可以将宽度（width）属性设置为auto，以占用整个窗口的宽度，并且它会根据窗口大小的变化动态地调整自身大小（例如，调整浏览器窗口大小或在不同屏幕尺寸上显示）。 例如：http://jsfiddle.net/NnsN2/

然而，我无法让高度（height）像宽度一样工作。即使我尝试将其设置为auto，它也始终是适合内容的最小高度。

通常的方法是首先获取窗口高度($(window).height())，并将其用作高度(height)，但这里行不通，因为它是静态的，不会根据窗口大小的变化而动态适应。

如何让高度始终占满整个窗口，并能够适应窗口大小的变化？

- skyork

---

你想让对话框覆盖整个窗口吗？ - Alnitak

@Alnitak，是的，覆盖整个窗口并在窗口大小更改时自动调整大小。 - skyork

在我看来，jQuery UI 对话框可能不是适合这项工作的正确控件... - Alnitak

@Alnitak，那么什么工具才是正确的选择？ - skyork

这取决于您需要jQuery对话框的哪些特定功能。首先，我会从高zIndex 100％宽度/高度的“覆盖”div开始，并从那里逐步构建。这可能会有所帮助- http://stackoverflow.com/questions/13993471/jquery-ui-overlay-without-dialog - Alnitak

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

在 fiddle 中查看代码

- Jai

---

这个有效。如果页面高度大于屏幕高度，你可以使用 $(document).height 来获取内容的完整高度。 - messerbill

Answer 2

以下是我如何“解决”jQuery UI Ver 1.8.17中的问题的方法：

在对话框被打开之后，假设您已经捕获了其id，请使用以下代码：

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

实际高度由包含对话内容的<div>父元素决定，因此参考该元素。您还可以使用此方法控制父元素的其他属性。

编码愉快！

- Roman

Answer 3

你可以使用jQuery插件：

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

- tady meshesha

---

稍微修改一下你的回答，并将括号插入到代码括号中。 - dpapadopoulos