Question

我正在寻找一种方法来根据内容动态更改jQuery UI Dialog高度。

这是我的代码：

$( "#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)
    {
    }
});

无论如何都要这样做吗？

Answer 1

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

Answer 2

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

但是你需要做一些CSS技巧来首先渲染iframe并获得其inbrowser文档高度，然后将该值应用于容器，然后在设置新高度后对容器进行表面处理。

类似......

取自这里：

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完全渲染（它将被隐藏）然后检查它并根据需要进行测量

祝你好运！

jQuery对话框动态高度

2 个答案: