Question

我在查找具体信息和示例方面遇到了很多麻烦。我的应用程序中有许多jQuery UI对话框，附加到加载了.ajax（）调用的div。他们都使用相同的设置调用：

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

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

据我所知，“autoResize”不再是对话框的选项，当我指定它时没有任何反应。

我正在尝试不为每个对话框编写单独的函数，因此.dialog("option", "width", "500")实际上不是一个选项，因为每个对话框的宽度都不同。

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

我有什么选择？我正在使用jQuery 1.4.1与jQuery UI 1.8rc1。看起来这应该是非常简单的事情。

编辑：我已经为此实施了一个kludgy解决方法，但我仍在寻找更好的解决方案。

Answer 1

我刚刚使用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设置可以解决这个问题吗？

唯一的问题是它使宽度偏离中心但我发现这个support ticket，它们提供了一个解决方法，将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>

Answer 2

有同样的问题，并且由于你提到真正的问题与CSS有关，我发现了这个问题：

在position:relative CSS规则中使用 position:absolute 而不是 .ui-dialog 会使对话框和width:'auto'行为异常

.ui-dialog { position: absolute;}

Answer 3

我是这样做的：

Responsive jQuery UI Dialog ( and a fix for maxWidth bug )

修复maxWidth＆amp; width：auto bug。

Answer 4

我想设置float：left对话框可以正常工作。据推测，对话框绝对是由插件定位的，在这种情况下，它的位置将由此确定，但浮动制作元素的副作用只有它们需要保持内容的宽度 - 仍然会生效。

如果你只是放一个像

这样的规则，这应该可行

.myDialog {float:left}

样式表中的

，但您可能需要使用jQuery

进行设置

Answer 5

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

Answer 6

出于某种原因，我一直在使用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,
    ...

Answer 7

您可以通过指定最大宽度来避免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>

Answer 8

我遇到了类似的问题。

将width设置为"auto"对我来说很好，但是当对话框包含大量文本时，它会覆盖页面的整个宽度，忽略maxWidth设置。

在maxWidth上设置create可以正常工作：

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

Answer 9

我也有这个问题。

我得到了它的工作：

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

Answer 10

我遇到同样的问题，并且在你的.ui-dialog {}中有绝对的位置{} css是不够的。我注意到这个位置：相对是在实际元素的直接样式上设置的，因此.ui-dialog css定义被覆盖了。设置位置：div上的绝对值我将静态地进行对话也不起作用。

最后，我更改了两个放在我的本地jQuery中以使其工作。

我将jQuery中的以下行更改为：

elem.style.position = "absolute";

在https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62

另外，由于我的对话框设置为draggable，我不得不在jQuery-ui中改变这一行：

this.element[0].style.position = 'absolute';

在https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48

或许通过我更彻底的风格会解决问题，但我想我会分享我是如何运作的。

Answer 11

如果您需要在IE7中使用它，则无法使用undocumented, buggy, and unsupported {'width':'auto'}选项。而是将以下内容添加到.dialog()：

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

.scrollWidth是否包含右侧边距取决于浏览器（Firefox与Chrome不同），因此您可以向.scrollWidth添加一个主观的“足够好”的像素数，或者替换它使用您自己的宽度计算功能。

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

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

Answer 12

您需要做的只是添加：

width: '65%',

Answer 13

增加了弗拉基米尔·科纳（Vladimir Kornea）的答案。

我想要一种设置宽度的方法，除非屏幕太小，然后再设置动态宽度。在大多数情况下，不是真正的“响应式”位效果很好。

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

Answer 14

编辑此波纹管：

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

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

14 个答案: