2

我正在寻找一种使 jQuery UI 对话框高度根据内容动态变化的方法。

这是我的代码：

$( "#dialog-modal_"+productID ).html( "<iframe src='index.php?act=showProduct&amp;id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>" );

$( "#dialog-modal_"+productID ).dialog(
{
    width: 810,
    height: 590,
    resizable: false,
    modal: true,
    open: function(event, ui)
    {
    }
});


反正有这样做吗？

4

2 回答 2

2

将高度更改为"auto"。有关详细信息，请参阅http://api.jqueryui.com/dialog/#option-height。

于 2013-01-06T18:48:06.850 回答
1

因为您给出的示例来自相对路径。您应该能够获取 iframe 文档的 .height()

但是，您需要做一些 CSS 技巧来首先渲染 iframe 并获取其浏览器文档高度，然后将该值应用于您的容器，然后在设置新高度后显示容器。

就像是 ...

取自这里：

var doc=document.getElementById("frame").contentDocument;

// Earlier versions of IE or IE8+ where !DOCTYPE is not specified
var doc=document.getElementById("frame").contentWindow.document;

那么你会

var iframeDocHeight = $(doc).height(); // assuming it is displayed
$( "#dialog-modal_"+productID ).css("height", iframeDocHeight);

这当然依赖于您已经派生出一种方法（给定页面框架的其余部分）以允许 iframe 呈现而不立即显示它的基础。

我会建议结合position:absolute和visibility:hidden然后一些 js 魔法来完成这个。如果没有完整的呈现的 html 文档，那么在我已经发布的内容之外建议一个绝对路径是没有用的。

基本上将 iframe 封装在一个带有 的元素中overflow:hidden;display:block;height0px;，但让 iframe 完全渲染（它将被隐藏）然后检查它并根据需要进行测量

祝你好运！

于 2013-01-06T18:54:05.193 回答