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