Display jQuery UI modal dialog in full window

Question

I want to display a modal dialog that contains several elements, including an iframe. I want this dialog to occupy about 90% of the width and height of the window. The markup is similar to the following:

<div id="dialog">
    <div>Header information</div>
    <iframe></iframe>
</div>

How can I achieve this? When I use the jQuery UI dialog, even when I specify a width and height via the dialog options or a class, they are overridden by inline styles that jQuery UI assigns to the elements.

Answer 1

I accomplished this by determining the window dimensions, then setting the dialog width and the iframe height accordingly. The following code may not be the nicest, but it works and can easily be altered to make the width and height a percentage less than the window.

var dlg = $("#dialog"); // Get the dialog container.
// Get the window dimensions.
var width = $(window).width();
var height = $(window).height();

// Provide some space between the window edges.
width = width - 50;
height = height - 150; // iframe height will need to be even less to account for space taken up by dialog title bar, buttons, etc.

// Set the iframe height.
$(dlg.children("iframe").get(0)).css("height", height + "px");

dlg.dialog({
    modal: true,
    height: "auto", // Set the height to auto so that it grows along with the iframe.
    width: width
});