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

【问题标题】：How to make jQuery UI dialog occupy full window and dynamically adjust to window size change?如何使 jQuery UI 对话框占据整个窗口并动态调整窗口大小的变化？
【发布时间】：2013-05-27 04:15:51
【问题描述】：

目前，我可以将width 属性设置为auto 以获取窗口的全部宽度，并且如果窗口大小正在更改（例如重新调整浏览器窗口大小或显示它），它会动态调整自身在不同的屏幕尺寸上）。示例：http://jsfiddle.net/NnsN2/

但是，我无法让 height 正常工作。它始终是适合内容的最小高度，即使我尝试将其设置为 auto。

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

如何使高度始终占据窗口的全高，并且能够适应窗口大小的变化？

【问题讨论】：

所以你想让对话框覆盖整个窗口？
@Alnitak，是的，覆盖整个窗口并在窗口大小发生变化时自动调整大小。
在我看来，jQuery UI 对话框可能不是工作的正确控制...
@Alnitak，那么适合这项工作的工具是什么？
这取决于您需要 jQuery 对话框的特定功能。在第一个实例中，我将从一个高 zIndex 100% 宽度/高度“覆盖”div 开始，然后从那里开始构建。这可能会有所帮助 - stackoverflow.com/questions/13993471/…

标签： javascript jquery css jquery-ui

【解决方案1】：

你可以尝试在运行时获取元素的#id或.class，然后根据窗口的宽高制作宽/高：

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

checkout in fiddle

【讨论】：

这行得通。如果页面大于屏幕，您可以使用$(document).height 获取内容的全高

【解决方案2】：

以下是我能够为 jQuery UI Ver 1.8.17“解决”这个问题的方法：

对话框打开后，假设您已捕获其 id，请使用以下命令：

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

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

编码愉快！

【讨论】：

【解决方案3】：

您可以使用jquery plugin：

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

【讨论】：

编辑一下你的答案并将括号插入代码括号。