Question

我想问为什么jQuery UI对话框会自动将宽度设置为“自动”？

下面是构建对话框的iframe。

<iframe id="pklist3" class="ui-dialog-content ui-widget-content" frameborder="0" src="http://localhost/picker" style="width: 570; height: 410px; min-height: 0px;" scrolltop="0" scrollleft="0">

它有一个固定的宽度和高度。但每当我调用“对话框（'打开'）”时，宽度就会自动变为“自动”。至于高度它被设置为一些固定值（我猜它是由jQuery UI计算的）

初始化对话框时，我已经设置了宽度和高度。像这样：

var dg = {};
dg.title = this.title;
dg.autoOpen = false;
dg.modal = true;
dg.overlay = { 
opacity: 0.4, 
background: "#000" 
        };                              
dg.resizable = false;
$('#pklist3').dialog(dg); //iframe width is still fixed value up to this line

但在此之后：

$('#pklist3').dialog('open'); //iframe width gets "auto" automatically

这是一种已知行为吗？有没有办法我们可以自己定义iframe的宽度和高度？

PS。我正在使用jQuery UI 1.8.16和jQuery 1.6.2 当我启动对话框时，iframe的宽度不会改变。它只在我调用dialog（'open'）

后才会改变

Answer 1

如果其他人正在处理这个问题而且偶然发现了这篇文章，就像我一样，我最终找到了一个适用于我的解决方案：http://enotacoes.wordpress.com/2012/04/19/setting-iframe-width-in-jquery-dialog/

基本上，您可以在iframe样式中设置最小宽度，而不是（或另外使用）宽度样式。

<iframe src="someurl" width="100%" height="100%" frameborder="0" 
        scrolling="no" style="min-width: 95%;height:100%;"/>

Answer 2

您可以在init上定义元素width：

$('#something').dialog({
    width: '100px'
});

Answer 3

<iframe src="<%= AppConfig[:running_url] %>" frameborder="0" scrolling="no"></iframe>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $("iframe").height($(window).height());
    $("iframe").width($(window).width());
  });
</script>

我认为scrolling="no"是必要的。

jQuery UI对话框自动设置iframe宽度

3 个答案: