自动将jQuery UI对话框的大小调整为ajax加载内容的宽度

自动将jQuery UI对话框的大小调整为ajax加载内容的宽度

我刚刚使用JQuery 1.4.1和UI 1.8rc1编写了一个小型示例应用程序。我所做的只是将构造函数指定为：

var theDialog = $(".mydialog").dialog({        autoOpen: false,        resizable: false,        modal: true,        width:'auto'});

我知道您说过，这使它占据了浏览器窗口的100％宽度，但是它在这里经过FF3.6，Chrome和IE8的测试，效果很好。

我不是在进行AJAX调用，只是手动更改对话框的HTML，但认为不会引起任何问题。其他的CSS设置是否可以将其淘汰？

唯一的问题是，它使宽度偏离中心，但是我发现了此支持标签，在这里，他们提供了一种将

dialog('open')

语句放入setTimeout中的解决方法，以解决此问题。

这是我的head标签的内容：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script type="text/javascript" src="jquery-ui.min.js"></script><link href="jquery-ui.css" rel="stylesheet" type="text/css" /><script type="text/javascript">    $(function(){        var theDialog = $(".mydialog").dialog({ autoOpen: false, resizable: false, modal: true, width: 'auto'        });        $('#one').click(function(){ theDialog.html('some random text').dialog('open');        });        $('#two').click(function(){ theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>').dialog('open');        });        $('#three').click(function(){ //this is only call where off-centre is noticeable so use setTimeout theDialog.html('<img src="./random.gif" width="500px" height="500px" />'); setTimeout(function(){ theDialog.dialog('open') }, 100);;        });     });</script>

我从http://jquery-ui.googlepre.com/files/jquery-ui-1.8rc1.zip下载了Jquery UI的js和css 。和身体：

<div ></div><a href='#' id='one'>test1</a><a href='#' id='two'>test2</a><a href='#' id='three'>test3</a>