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() を取得できるはずです

ただし、最初に iframe をレンダリングしてブラウザ内のドキュメントの高さを取得するために CSS トリックを実行する必要があります。次に、その値をコンテナに適用し、新しい高さが設定されたらコンテナを表示します。

何かのようなもの ...

ここから取得：

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 をすぐに表示せずにレンダリングできるようにする方法を導き出したことに基づいています。

これを実現するには、 と の組み合わせと、いくつかの js ウィザードリィをお勧めしposition:absoluteますvisibility:hidden。完全にレンダリングされた html ドキュメントがなければ、私が既に投稿したものを超えて、これへの絶対パスを提案してもあまり役に立ちません。

基本的に iframe を で要素にカプセル化しますが、iframe をoverflow:hidden;display:block;height0px;完全にレンダリングして (非表示にします)、それを調べて、必要に応じて測定を行います

幸運を！

于 2013-01-06T18:54:05.193 に答える