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

javascript jquery ajax jquery-ui jquery-ui-dialog

2022-08-30 04:16:10

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

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

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

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

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

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

我有哪些选择？我使用jQuery 1.4.1和jQuery UI 1.8rc1。似乎这应该是一件非常容易的事情。

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

答案 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设置会把它敲掉吗？

唯一的问题是它使宽度偏离中心，但我找到了这个支持票证，他们提供了一种解决方法，将语句放在setTimeout中以解决问题。dialog('open')

这是我的头部标签的内容：

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

答案 2

有同样的问题，多亏了你提到真正的问题与CSS有关，我发现了这个问题：

在CSS规则中使用positage：relative而不是positage：absolute会使对话框和行为变得奇怪。.ui-dialogwidth:'auto'

.ui-dialog { position: absolute;}