在完整窗口中显示jquery ui模式对话框
问题描述:
我想显示一个包含多个元素(包括iframe)的模式对话框。我想要这个对话框占据窗口宽度和高度的大约90%。该标记类似于以下内容:在完整窗口中显示jquery ui模式对话框
<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
});