在全窗口中显示 jQuery UI 模式对话框

发布于 2024-12-09 19:26:55 字数 304 浏览 0 评论 0原文

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

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

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

骄兵必败 2024-12-16 19:26:55

我通过确定窗口尺寸，然后相应地设置对话框宽度和 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
});

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

回复收藏 0 原文

~没有更多了~