Question

当我打开具有预定义大小（例如，800x600）的jQuery对话框时，对话框中的iframe未正确调整大小。看起来它有默认大小。事实上，高度还可以，但宽度似乎无缘无故地保持在300px。

我正在创建iframe和对话框：

someVar = '<iframe id="some-dialog" class="window-frame" src="http://example.com/"></iframe>';

someVar.dialog
    ({
        title: command.buttonText,
        autoOpen: false,
        modal: false,
        resizable: true
    })
    .dialog('option', 'width', 800)
    .dialog('option', 'height', 600);

我尝试在init调用中输入宽度和高度，结果是一样的。如果我省略这两个，则使用默认值初始化对话框，随后的大小调整工作正常。

任何想法都会有所帮助......

更新

我已将iframe包装在div中，然后使用标准调用创建对话框：

someVar.dialog
    ({
        title: command.buttonText,
        autoOpen: false,
        modal: false,
        resizable: true,
        width: 800,
        height: 600
    })

不是真正的解决方案，但它有效......（虽然感觉很脏！）

Answer 1

我通过向IFrame添加几个样式来解决它：

iframe#some-dialog {
    width: 100% !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Answer 2

someVar = '<iframe id="some-dialog" class="window-frame" src="http://example.com/"></iframe>';

someVar.dialog({
  title: command.buttonText,
  autoOpen: false,
  modal: false,
  resizable: true,
  width:800,
  height:600
}).width(800-10).height(600-10);

编辑：也许我不明白你的意思。不管怎样，请检查 Demo:

如何使用iframe正确调整jQuery.ui对话框的大小

2 个答案: