将jQuery UI对话框自动调整为由ajax加载的内容的宽度
我在寻找具体的信息和例子方面遇到了很多麻烦。 我有我的应用程序附加到div加载与.ajax（）调用的一些jQuery UI对话框。 他们都使用相同的设置呼叫：
$(".mydialog").dialog({ autoOpen: false, resizable: false, modal: true }); 我只是想让对话框调整到被加载内容的宽度。 现在，宽度只停留在300像素（默认），我得到一个水平滚动条。
据我所知，“autoResize”不再是对话框的选项，当我指定它时没有任何反应。
我试图不写一个单独的函数为每个对话框，所以.dialog("option", "width", "500")是不是真的一个选项，因为每个对话将有不同的宽度。
指定width: 'auto'对话框选项的width: 'auto'只是使对话框占用浏览器窗口宽度的100％。
我有什么select？ 我正在使用jQuery 1.4.1与jQuery UI 1.8rc1。 看来这应该是一件非常简单的事情。
编辑：我已经实现了这个kludgy解决方法，但我仍然在寻找更好的解决scheme。
我刚刚写了一个使用JQuery 1.4.1和UI 1.8rc1的小示例应用程序。 我所做的只是将构造函数指定为：
var theDialog = $(".mydialog").dialog({ autoOpen: false, resizable: false, modal: true, width:'auto' });
我知道你说，这使得它占用了浏览器窗口的100％宽度，但它在这里很好用，在FF3.6，Chrome和IE8testing。
我没有进行AJAX调用，只是手动更改对话框的HTML，但不认为这会导致任何probs。 其他一些CSS设置可以敲出来吗？
唯一的问题是，它使宽度偏离中心，但我发现这个支持票据 ，他们提供了一个解决scheme，将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'performance得很奇怪。
.ui-dialog { position: absolute;}
以下是我如何做到的：
响应式jQuery UI对话框（以及修复maxWidth错误）
修复最大宽度和宽度：自动错误。
我想象设置浮动：左对话框将工作。 大概这个对话是完全由插件定位的，在这种情况下，它的位置将由这个决定，但是浮动元素的副作用只有在它们需要保存内容时才会生效。
这应该工作，如果你只是像一个规则
.myDialog {float:left}
在你的样式表中，虽然你可能需要使用jQuery来设置它
当我升级jQuery UI到1.8.1而不升级相应的主题时，我有同样的问题。 只需要升级主题，“自动”再次运行。
由于某种原因，我一直在IE7的整个页面宽度的问题，所以我做了这个黑客：
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, ...
您可以通过指定最大宽度来避免100％宽度问题。 最大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("ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="jquery-1.11.3.min.js"></script> <script src="http://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="http://i.stack.imgur.com/5leq2.jpg" width="450" height="300"> </div> <div id="content-2" style="display: none;"> <img src="http://i.stack.imgur.com/9pVkn.jpg" 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>
我有一个类似的问题。
设置width为"auto"对我来说工作得很好，但是当对话框中包含大量文本时，它会跨越页面的整个宽度，忽略最大宽度设置。
设置maxWidth create工作正常，但：
$( ".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; }
我有同样的问题，有位置：你的.ui-对话框绝对是不够的。 我注意到这个位置：相对于实际元素的直接样式被设置，所以.ui-dialog的css定义被覆盖。 设置位置：绝对的div我会静静地做一个对话也没有工作。
最后，我更改了两个放置在我的本地jQuery，使这项工作。
我在jQuery中改变了以下行：
elem.style.position = "absolute";
在https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62
另外，由于我的对话框设置为可拖动的，我不得不在jQuery-ui中更改这一行：
this.element[0].style.position = 'absolute';
在https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48
也许通过我更彻底的风格来解决问题，但是我想分享我是如何得到这个工作的。
如果你需要它在IE7中工作，你不能使用未公开的，错误的和不受支持的 {'width':'auto'}选项。 相反，将以下内容添加到.dialog() ：
'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }
.scrollWidth是否包含右侧填充取决于浏览器（Firefox不同于Chrome），因此您可以向.scrollWidth添加一个主观的“足够好”的像素.scrollWidth ，或者用您自己的宽度计算函数replace它。
你可能想在你的.dialog()选项中包含width: 0 ，因为这个方法永远不会减小宽度，只会增加宽度。
经testing可在IE7，IE8，IE9，IE10，IE11，Firefox 30，Chrome 35和Opera 22上运行。
所有你需要做的只是添加：
width: '65%',
