如何让 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();