自动将jQueryUI对话框调整为Ajax加载的内容的宽度

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (12)

我很难找到这方面的具体信息和例子。在我的应用程序中,有许多jQueryUI对话框附加到div,这些对话框都带有.ajax()调用。它们都使用相同的安装调用:

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

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

据我所知,“自动调整大小”不再是对话框的选项,当我指定它时,什么也不会发生。

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

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

我有什么选择?我在jQueryUI1.8rc1中使用jQuery1.4.1。看起来这应该是件很容易的事。

编辑:我已经为这个问题实现了一个简单的解决方案,但我仍然在寻找一个更好的解决方案。

提问于
用户回答回答于

用JQuery1.4.1和UI1.8rc1编写了一个很小的示例应用程序。

var theDialog = $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:'auto'
});

我不进行Ajax调用,只是手动更改对话框的HTML,但不认为这会导致任何问题。

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

<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>
<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>
用户回答回答于

position:relative代替position:absolute在你的.ui-dialogCSS规则使对话框和width:'auto'举止古怪。

.ui-dialog { position: absolute;}

扫码关注云+社区