如何让 jQuery UI 对话框占据整个窗口并根据窗口大小的变化动态调整？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16855636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make jQuery UI dialog occupy full window and dynamically adjust to window size change?
提问by skyork
At the moment, I can set widthattribute to autoto take the full width of the window, and it dynamically adjust itself if the window size is being changed (e.g. re-sizing the browser windows or displaying it on a different screen size). Example: http://jsfiddle.net/NnsN2/
目前，我可以将width属性设置auto为占据窗口的整个宽度，如果窗口大小发生变化（例如，重新调整浏览器窗口的大小或在不同的屏幕大小上显示它），它会动态调整自身。示例：http: //jsfiddle.net/NnsN2/
However, I can't get the heightto work the same. It will always be the minimum height that will fit the content, even though I've tried setting it to auto.
但是，我无法height使其正常工作。它始终是适合内容的最小高度，即使我已尝试将其设置为auto.
The usual approach of getting the window height first ($(window).height()) and use that for heightdoesn't work here, because it will be static and will not dynamically adapt to change of window size.
通常先获取窗口高度 ( $(window).height()) 并使用它的方法height在这里不起作用，因为它是静态的，不会动态适应窗口大小的变化。
How can I make the height always take the full height of the window as well as be able to adapt itself to window size change?
如何使高度始终占据窗口的完整高度并能够适应窗口大小的变化？
回答by Jai
You can try to get the element's #idor .classat runtime and then make the width/Height according to the window width and height:
您可以尝试在运行时获取元素的#id或.class，然后根据窗口的宽度和高度制作宽度/高度：
$(window).resize(function () {
$('.ui-dialog').css({
'width': $(window).width(),
'height': $(window).height(),
'left': '0px',
'top':'0px'
});
}).resize(); //<---- resizes on page ready
回答by Roman
Here is how I was able to "solve" this problem for jQuery UI Ver 1.8.17:
以下是我如何为 jQuery UI Ver 1.8.17“解决”这个问题：
Afterthe dialogue has been opened, and assuming that you have captured its id, use the following:
打开对话后，假设您已捕获其 id，请使用以下命令：
$("#DlgID").parent().css('height', $(window).height());
The actual height is dictated by the parent of your <div>containing the dialogue content, hence the reference. You can also use this method to control other properties of the parent.
实际高度由<div>包含对话内容的父级决定，因此是参考。您还可以使用此方法来控制父级的其他属性。
Happy coding!
快乐编码！
回答by tady meshesha
You can use jquery plugin:
您可以使用jquery 插件：
$("#demo").dialog({
width: 500,
height: 300,
dialogClass: "dialog-full-mode" /*must to add this class name*/
});
//initiate the plugin
$(document).dialogfullmode();
