我在这方面遇到了很多麻烦，无法找到具体的信息和示例。我的应用程序中有许多与.ajax()调用加载的div相关联的jQuery UI对话框。它们都使用相同的设置调用：
$(".mydialog").dialog({
autoOpen: false,
resizable: false,
modal: true
});
我想让对话框的宽度根据加载的内容自适应。目前，宽度仅保持在300像素（默认值），导致出现水平滚动条。
据我所知，对话框的"autoResize"选项已不再可用，指定该选项不会发生任何事情。
我试图避免为每个对话框编写单独的函数，因此.dialog("option", "width", "500")不是一个好选择，因为每个对话框将具有不同的宽度。
为对话框选项指定width: 'auto'只会使对话框占据浏览器窗口的100%宽度。
我有哪些选择？我正在使用jQuery 1.4.1和jQuery UI 1.8rc1。这似乎应该是非常容易实现的。
编辑：我已经实现了一个笨拙的解决方法，但我仍在寻找更好的解决方案。
我刚刚使用 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中以解决问题的解决方法。
这是我的标签的内容：
<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.googlecode.com/files/jquery-ui-1.8rc1.zip下载了Jquery UI的js和css。
<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>
我遇到了同样的问题，感谢你提到真正的问题与 CSS 相关，我找到了解决方法：
.ui-dialog 的 CSS 规则中使用 position:relative 而非 position:absolute 会导致对话框和 width:'auto' 行为异常。
.ui-dialog { position: absolute;}
maxWidth 选项无效；因此，请在对话框小部件上设置 CSS 的 max-width 属性。maxHeight 选项。它会在必要时正确显示滚动条。
$(function() {
var $dialog = $("#dialog");
$dialog.dialog({
autoOpen: false,
modal: true,
width: "auto"
});
/*
* max-width should be set on dialog widget because maxWidth option has known issues
* max-height should be set using maxHeight option
*/
$dialog.dialog("widget").css("max-width", $(window).width() - 100);
$dialog.dialog("option", "maxHeight", $(window).height() - 100);
$(".test-link").on("click", function(e) {
e.preventDefault();
$dialog.html($(this.hash).html());
// if you change the content of dialog after it is created then reset the left
// coordinate otherwise content only grows up to the right edge of screen
$dialog.dialog("widget").css({ left: 0 });
$dialog.dialog("open");
});
});@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="dialog"></div>
<!-- test links -->
<p>
<a href="#content-1" class="test-link">Image (Landscape)</a>
<a href="#content-2" class="test-link">Image (Portrait)</a>
<a href="#content-3" class="test-link">Text Content (Small)</a>
<a href="#content-4" class="test-link">Text Content (Large)</a>
</p>
<p>If you are viewing in Stack Snippets > Full page then reload the snippet so that window height is recalculated (Right click > Reload frame).</p>
<!-- sample content -->
<div id="content-1" style="display: none;">
<img src="https://istack.dev59.com/5leq2.webp" width="450" height="300">
</div>
<div id="content-2" style="display: none;">
<img src="https://istack.dev59.com/9pVkn.webp" width="300" height="400">
</div>
<div id="content-3" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
</div>
<div id="content-4" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
<p>Aenean eu magna tempor, pellentesque arcu eget, mattis enim. Cras at volutpat mi. Aenean id placerat felis, quis imperdiet nunc. Aenean a iaculis est, quis lacinia nisl. Sed aliquet sem eget justo convallis congue. Quisque rhoncus nulla sit amet cursus maximus. Phasellus nec auctor urna. Nam mattis felis et diam finibus consectetur. Etiam finibus dignissim vestibulum. In eu urna mattis dui pharetra iaculis. Nam eleifend odio et massa imperdiet, et hendrerit mauris tempor. Quisque sapien lorem, dapibus ut ultricies ut, hendrerit in nulla. Nunc lobortis mi libero, nec tincidunt lacus pretium at. Aliquam erat volutpat.</p>
<p>Fusce eleifend enim nec massa porttitor tempor a eget neque. Quisque vel augue ac urna posuere iaculis. Morbi pharetra augue ac interdum pulvinar. Duis vel posuere risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae lectus non nisl iaculis volutpat nec vitae ante. Maecenas quis condimentum elit. Sed nisl urna, convallis ut pellentesque sit amet, pellentesque eget quam. Pellentesque ornare sapien ac scelerisque pretium. Pellentesque metus tortor, accumsan in vehicula iaculis, efficitur eget nisi. Donec tincidunt, felis vel viverra convallis, lectus lectus elementum magna, faucibus viverra risus nulla in dolor.</p>
<p>Duis tristique sapien ut commodo laoreet. In vel sapien dui. Vestibulum non bibendum erat. Etiam iaculis vehicula accumsan. Phasellus finibus, elit et molestie luctus, massa arcu tempor nulla, id hendrerit metus mauris non mi. Morbi a ultricies magna. Proin condimentum suscipit urna eu maximus. Mauris condimentum massa ac egestas fermentum. Praesent faucibus a neque a molestie. Integer sed diam at eros accumsan convallis.</p>
</div>.myDialog {float:left}
在您的样式表中，虽然您可能需要使用jQuery进行设置
当我将jquery UI升级到1.8.1，而没有升级相应的主题时，我遇到了同样的问题。只需要同时升级主题，"auto"就可以正常工作。
由于某种原因，我在IE7中一直遇到整个页面宽度的问题，所以我使用了以下hack：
var tag = $("<div></div>");
//IE7 workaround
var w;
if (navigator.appVersion.indexOf("MSIE 7.") != -1)
w = 400;
else
w = "auto";
tag.html('My message').dialog({
width: w,
maxWidth: 600,
...
你需要做的就是添加：
width: '65%',
width设置为"auto"对我很有效，但当对话框包含大量文本时，它会使其横跨整个页面的宽度，而不考虑maxWidth的设置。create上设置maxWidth就可以正常工作：$( ".selector" ).dialog({
width: "auto",
// maxWidth: 660, // This won't work
create: function( event, ui ) {
// Set maxWidth
$(this).css("maxWidth", "660px");
}
});
我也遇到过这个问题。
我通过以下方法解决了它：
.ui-dialog{
display:inline-block;
}
{'width':'auto'}在IE7中无法工作，也不会修复，因为根据scott.gonzalez的说法，{'width':'auto'}选项不受jQuery-UI支持: "对话框不支持自动宽度。文档说明该选项只接受一个数字，该数字将用于像素大小。请参见jquery-ui-dev线程以了解我们为什么不支持自动宽度的讨论。" - Val Kornea