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

Question

At the moment, I can set width attribute to auto to take the full width of the window, and it dynamically adjust itself if the window size is being changed (eg re-sizing the browser windows or displaying it on a different screen size). Example: http://jsfiddle.net/NnsN2/

However, I can't get the height to work the same. It will always be the minimum height that will fit the content, even though I've tried setting it to auto .

The usual approach of getting the window height first ( $(window).height() ) and use that for height doesn't work here, because it will be static and will not dynamically adapt to change of window size.

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?

Answer 1

You can try to get the element's #id or .class at runtime and then make the width/Height according to the window width and height:

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

checkout in fiddle

Answer 2

Here is how I was able to "solve" this problem for jQuery UI Ver 1.8.17:

After the dialogue has been opened, and assuming that you have captured its id, use the following:

$("#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.

Happy coding!

Answer 3

You can use jquery plugin :

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