在jQuery对话框中对齐iframe

Question

我想在jquery ui对话框中显示和iframe。需要根据所需用户的对话框大小调整此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的宽度和高度感到很生气。

Answer 1

这对你没用。

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

<强>更新 由于可能的填充边距问题而更改了代码。

Answer 2

请尝试此演示 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**