137

我很难找到这方面的具体信息和示例。我的应用程序中有许多 jQuery UI 对话框，这些对话框附加到加载了 .ajax() 调用的 div 上。他们都使用相同的设置调用：

 $(".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 一起使用。看起来这应该是一件非常容易的事情。

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

4

14 回答 14

257

我刚刚使用 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.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>
于 2010-02-14T19:13:00.003 回答
11

遇到了同样的问题，感谢您提到真正的问题与 CSS 有关，我发现了问题：

在你的CSS 规则中使用position:relative而不是使对话框和行为奇怪。position:absolute.ui-dialogwidth:'auto'

.ui-dialog { position: absolute;}
于 2011-12-15T00:29:18.100 回答
4

我是这样做的：

响应式 jQuery UI 对话框（以及对 maxWidth 错误的修复）

修复 maxWidth 和 width: 自动错误。

于 2013-05-12T16:49:35.167 回答
3

您可以通过指定最大宽度来避免 100% 宽度问题。该maxWidth选项似乎不起作用；max-width所以改为在对话框小部件上设置 CSS属性。

如果您还想限制最大高度，请使用该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>

于 2013-10-11T12:43:11.707 回答
2

我想为对话框设置 float:left 会起作用。大概对话框是由插件绝对定位的，在这种情况下，它的位置将由它确定，但是浮动的副作用——使元素只与它们需要的宽度一样宽以容纳内容——仍然会生效。

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

.myDialog {float:left}

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

于 2010-02-16T00:29:53.120 回答
2

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

于 2010-05-03T12:13:47.120 回答
2

出于某种原因，我一直遇到 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,
    ...
于 2012-03-30T20:55:08.577 回答
1

我有一个类似的问题。

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

设置maxWidthoncreate工作正常：

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});
于 2013-11-26T13:39:20.637 回答
1

我也有这个问题。

我得到了它的工作：

.ui-dialog{
    display:inline-block;
}
于 2015-09-05T11:50:29.723 回答
1

您需要做的只是添加：

width: '65%',
于 2017-11-05T23:42:46.990 回答
0

我有同样的问题，并且 position: absolute 在你的 .ui-dialog{} css 中是不够的。我注意到 position: relative 被设置在实际元素的直接样式上，因此 .ui-dialog css 定义被覆盖。在 div 上设置 position: absolute 我打算静态地创建一个对话框也不起作用。

最后，我更改了两个放置在本地 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

也许通过我更彻底的风格可以解决问题，但我想我会分享我是如何做到这一点的。

于 2013-04-11T14:27:51.450 回答
0

如果您需要它在 IE7 中工作，则不能使用未记录、有缺陷和不受支持 {'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 中运行。

于 2014-06-25T23:07:44.340 回答
0

添加到 Vladimir Kornea 的答案。

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

, 'open': function(){
   var resposive_width = ($( window ).width() > 640) ? 640 : ($( window ).width() - 20);
   $(this).dialog('option', 'width', resposive_width)
 }
于 2020-09-26T03:20:36.050 回答
-1

编辑以下内容：

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

于 2019-05-06T07:45:14.010 回答