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

134

我在查找有关此方面的特定信息和示例时遇到很多麻烦。我的应用程序中有许多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一起使用。看起来这应该很简单。

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

javascript  jquery  ajax  jquery-ui  jquery-ui-dialog 
— o
source

Answers:

250

我刚刚使用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>
— 费明
source
Fermin-感谢您的示例和帖子。事实证明，这确实是CSS的问题，尽管目前尚不清楚确切的问题是什么（无论如何，从Firebug来看这当然并不明显）。通过将我所有对话框的div移到顶层并使用默认的1.8.1 CSS（而不是主题版本），效果很好。当1.8.1版本下降时，我将逐步将主题版本移回，并找到问题的根源。谢谢！
— womp 2010年
没问题，很高兴我能帮上忙。我以前去过那里，这是一次移动1个CSS语句的情况..享受！
— Fermin
2
IE7似乎已被破坏
— 亚历克斯（Alex）
2
如果使用AJAX加载内容，则setTimeout（）可能无法提供可靠的解决方案（例如，如果服务器运行缓慢且加载时间超过100毫秒）。更好的解决方案是使用.ajax（）方法的回调函数来触发打开。这样，在页面加载完成之前它将不会打开。
— njbair 2012年
1
{'width':'auto'}根据scott.gonzalez的规定，由于jQuery-UI不支持该{'width':'auto'}选项，因此在IE7中不起作用，并且不会得到修复：“对话框不支持自动宽度。文档指出该选项仅接受数字，将使用该数字有关像素大小的信息，请参见jquery-ui-dev线程以获取有关我们为什么不支持自动宽度的讨论。”
— 弗拉基米尔·科纳
11

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

拥有position:relative而不是position:absolute在你的.ui-dialogCSS规则，使对话和width:'auto'行为怪异。

.ui-dialog { position: absolute;}
— 复地
source
2

我想象为对话框设置float：left会起作用。假定对话框是由插件绝对定位的，在这种情况下，对话框的位置将由插件确定，但是float的副作用-使元素仅与容纳内容所需的宽度一样仍然有效。

如果您只是将规则设置为

.myDialog {float:left}

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

— 哪里
source
2

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

— 耶苏斯·阿隆索
source
2

出于某种原因，我一直在使用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,
    ...
— 亚历克斯
source
2

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

— 萨尔曼A
source
1

我有一个类似的问题。

设置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");
  }
});
— si
source
1

我也有这个问题。

我得到它与此工作：

.ui-dialog{
    display:inline-block;
}
— 肯Q
source
1

您需要做的只是添加：

width: '65%',
— 塔加特
source
根据OP的问题，这不适用于他的所有对话框，并且他仍然需要分别设置每个对话框。
— roelofs
0

我有同样的问题，也有相同的位置：在您的.ui-dialog {} CSS中，绝对是不够的。我注意到了这一位置：在实际元素的直接样式上设置了relative，因此.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

也许我会更彻底地采用这种风格来解决问题，但是我想分享一下我是如何工作的。

— 史考特
source
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中运行。

— 弗拉基米尔·科纳（Vladimir Kornea）
source
-1

编辑此波纹管：

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

— 卡尔256
source
3
请在代码中添加一些解释-为什么要修改答案？
— Nico Haase
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.