JQuery ui对话框打开后调整大小

我有一个JQuery对话框，用于向用户显示消息。该对话框有两个按钮：“确定”和“详细信息”。这个想法是在对话框打开时显示用户友好的消息，当用户单击“详细信息”按钮时，我想显示用户友好的消息以及用户友好消息下的更详细的消息。“详细信息”按钮使用切换功能显示/隐藏详细信息

对话框的定义如下：

function showNewDocumentDialog(dialogTitle, dialogMessage, dialogDetailMessage) {
            var dialog$ = $('#dialogId');
            var dialogDetail$ = $('#dialogDetailId')
            var showDetailContent = false;            

            dialog$.dialog({
                autoOpen: false,
                title: dialogTitle,
                modal: true,
                width: 'auto',
                height: 'auto',
                zIndex: 39000,
                open: function (type, data) {
                    $('#dialogContentId').text(dialogMessage);
                    $('#dialogDetailContentId').text(dialogDetailMessage);
                    $(this).parent().appendTo($('form:first'));

                },
                buttons: [
                                {
                                    text: "Ok",
                                    click: function () { $(this).dialog("close"); }
                                },
                                {
                                    text: "Details",
                                    click: function () {
                                        dialogDetail$.toggle(showDetailContent);
                                        showDetailContent = !showDetailContent;
                                    }
                                }
                            ]
            });

            if (dialogDetailMessage == '') {
                $(":button:contains('Details)").attr("disabled", "disabled").addClass('ui-state-disabled');
            }
            dialog$.dialog('open');
        }
    </script>   
    <div id="dialogId" title="Title" style="display: none">        
        <p id="dialogContentId">Content</p>
        <div id="dialogDetailId" style="display: none">
            <p id="dialogDetailContentId">DetailContent</p>        
        </div>
    </div>

函数showNewDocumentDialog（dialogTitle、dialogMessage、dialogDetailMessage）{
变量对话框$=$（“#对话框ID”）；
var dialogDetail$=$（“#dialogDetailId”）
var showtailcontent=false；
对话框$.dialog({
自动打开：错误，
标题：dialogTitle，
莫代尔：是的，
宽度：“自动”，
高度：“自动”，
zIndex:39000，
打开：功能（类型、数据）{
$（'#dialogContentId'）。文本（dialogMessage）；
$（'#dialogDetailContentId'）.text（dialogDetailMessage）；
$（this.parent（）.appendTo（$（'form:first'））；
},
按钮：[
{
文字：“Ok”，
单击：函数（）{$（this）.dialog（“close”）；}
},
{
正文：“详情”，
单击：函数（）{
dialogDetail$.toggle（showDetailContent）；
showDetailContent=！showDetailContent；
}
}
]
});
如果（dialogDetailMessage==''）{
$（“：按钮：包含（'Details）”）.attr（“已禁用”、“已禁用”）.addClass（'ui-state-disabled'）；
}
对话框$.dialog（'open'）；
}
内容

详细内容

---

当用户单击“详细信息”按钮时，如何调整对话框的大小以适应用户友好信息和详细信息？当用户单击“详细信息”按钮以隐藏详细信息时，再次缩小对话框大小？

尝试调整“详细信息覆盖”按钮的大小，通过获取由dailog生成的div的宽度，按如下方式单击

var width = $("selector").width();
var height = $("selector").height();

    if (width > 450) {
        $(".ui-widget-content").css("width", width);

    }
 if (height > 450) {
        $(".ui-widget-content").css("height", height);

    }

    $("#dvNotesPopup").dialog('option', 'position', 'center'); 
}

---

您是否考虑过使用HTML5细节元素，该元素基本上具有此功能（在某些浏览器中）