0

iframe を jquery ui ダイアログに表示したい。この iframe は、目的のユーザーのダイアログ サイズに合わせてサイズを変更する必要があります。ダイアログは、タイトル (上) とサイズ変更ボタン (右下) 以外のすべてのダイアログのスペースを占有する必要があります。

jQuery(document).ready(function(){
    jQuery("<div id ='container'><iframe src='http://www.google.com'></iframe></div>").dialog({modal:true,title:"Title",width:800,height:600});
});

何か考えはありますか？私はCSSの幅と高さに腹を立てています。

4

2 に答える 2

0

これで問題ありません。

jQuery(document).ready(function(){
    jQuery("<div id ='container' style='padding:0px; margin:0px; overflow:hidden;'><iframe height=100% width=100% style='width:100%; height:100%;padding:0px; margin:0px;' frameborder=0 src='http://www.stack.com'></iframe></div>").dialog({modal:true,title:"Title",width:400,height:400});
});

UPDATE パディングマージンの問題が発生する可能性があるため、コードを変更しました。

于 2012-06-21T10:54:17.040 に答える
0

この動作デモ http://jsfiddle.net/xyctR/18/を試してください

iframe に jsfiddle が読み込まれ、残りの動作を確認できます。

お役に立てれば、

次のコードで十分です。つまり、「目的のユーザーのダイアログ サイズに応じてサイズを変更する必要があります。ダイアログは、タイトル (上部) とサイズ変更ボタン以外のすべてのダイアログのスペースを占有する必要があります」

コード

function showDialog(url){
   var iframe = $('<iframe id="modalIframeId" width="100%" height="100%" src='+url+' marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title">Your browser does not support</iframe>')
    .on('load', function() {
        console.log('loaded');
    });

    $("#divId")
        .append('<div id="loading">Loading....</div>')
        .append(iframe)
        .dialog({modal:true,title:"Title",width:800,height:600});
}

showDialog('http://jsfiddle.net');

​**image**

ここに画像の説明を入力

于 2012-06-21T10:55:32.053 に答える