jquery-ui之在全窗口中显示 jQuery UI 模态对话框

我想显示一个包含多个元素(包括 iframe)的模式对话框。我希望这个对话框占据窗口宽度和高度的大约 90%。标记类似于以下内容:

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

我怎样才能做到这一点？当我使用 jQuery UI 对话框时，即使我通过对话框选项或类指定宽度和高度，它们也会被 jQuery UI 分配给元素的内联样式覆盖。

请您参考如下方法:

我通过确定窗口尺寸，然后相应地设置对话框宽度和 iframe 高度来完成此操作。以下代码可能不是最好的，但它可以工作并且可以轻松更改以使宽度和高度小于窗口的百分比。

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 
});