自动调整 jQueryUI 对话框的大小到 ajax 加载的内容的宽度

我在寻找这方面的具体信息和例子时遇到了很多麻烦。在我的应用程序中，有许多 jQueryUI 对话框附加到 div，这些对话框加载了。Ajax ()调用。它们都使用相同的设置调用:

 $(".mydialog").dialog({
autoOpen: false,
resizable: false,
modal: true
});

我只是想让对话框调整到加载的内容的宽度。现在，宽度保持在300px (默认值) ，我得到了一个水平滚动条。

据我所知，“ autoResize”不再是对话框的一个选项，当我指定它时什么也不会发生。

我试图不为每个对话框编写单独的函数，所以 .dialog("option", "width", "500")实际上不是一个选项，因为每个对话框将有不同的宽度。

为对话框选项指定 width: 'auto'只会使对话框占用浏览器窗口宽度的100% 。

我有什么选择？我使用 jQuery 1.4.1和 jQuery UI 1.8 rc1。看起来这应该是件很简单的事。

编辑: 我已经为此实现了一个组装工作区，但我仍在寻找更好的解决方案。

222129 次浏览
小开
最佳答案

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

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>
小开

我想设置 float: left 对话框会起作用。据推测，对话框绝对是由插件定位的，在这种情况下，它的位置将由此决定，但浮动制作元素的副作用只有在它们需要保持内容的宽度时才会生效。

这个应该可以工作，如果你只是把一个规则

.myDialog {float:left}

在您的样式表中，尽管您可能需要使用 jQuery 来设置它

小开

当我将 jquery UI 升级到1.8.1而没有升级相应的主题时，也遇到了同样的问题。只是需要升级的主题太和“自动”再次工作。

小开

遇到了同样的问题，感谢你提到真正的问题与 CSS 有关，我发现了这个问题:

在 .ui-dialog CSS 规则中使用 position:relative而不是 position:absolute会使对话框和 width:'auto'表现得很奇怪。

.ui-dialog { position: absolute;}
小开

由于某种原因，我一直在 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,
...
小开

我有同样的问题和立场: 绝对在你。Ui 对话框{} css 不够。我注意到了这个位置: relant 被设置为实际元素的直接样式，所以。Ui 对话框 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

也许通过我已经更彻底的风格将修复的东西，但认为我会分享我是如何得到这个工作。

小开

我是这么做的:

响应性 jQuery UI 对话框(以及 maxWidth 错误的修复)

修复 maxWidth & width: auto bug。

小开

您可以通过指定最大宽度来避免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("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://i.stack.imgur.com/5leq2.jpg" width="450" height="300">
</div>


<div id="content-2" style="display: none;">
<img src="https://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上设置 maxWidth可以正常工作:

$( ".selector" ).dialog({
width: "auto",
// maxWidth: 660, // This won't work
create: function( event, ui ) {
// Set maxWidth
$(this).css("maxWidth", "660px");
}
});
小开

如果您需要它在 IE7中工作，则不能使用 没有文档，漏洞百出，没有支持{'width':'auto'}选项。相反，在你的 .dialog()中加入以下内容:

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

.scrollWidth是否包含右侧填充取决于浏览器(Firefox 不同于 Chrome) ，所以你可以在 .scrollWidth上添加一个主观的“足够好”的像素数，或者用你自己的宽度计算函数替换它。

您可能希望在 .dialog()选项中包含 width: 0，因为此方法不会减小宽度，只会增加宽度。

在 IE7，IE8，IE9，IE10，IE11，Firefox 30，Chrome 35和 Opera 22中测试。

小开

我也有这个问题。

我用这个把它弄好了:

.ui-dialog{
display:inline-block;
}
小开

你只需要加上:

width: '65%',
小开

编辑以下文字:

$("#message").dialog({
autoOpen:false,
modal:true,
resizable: false,
width:'80%',

小开

弗拉基米尔 · 科尼亚的回答。

我想要一种方法来设置宽度，除非屏幕太小，然后一个动态宽度。在大多数情况下，并非真正意义上的“响应”位工作得很好。

, 'open': function(){
var resposive_width = ($( window ).width() > 640) ? 640 : ($( window ).width() - 20);
$(this).dialog('option', 'width', resposive_width)
}

提交答案