Изменение размера JQuery UI после открытия

Question

У меня есть диалог JQuery, который я использую, чтобы показать сообщение пользователю. Диалог имеет 2 кнопки: "ОК" и "Детали". Идея состоит в том, чтобы показать удобное для пользователя сообщение, когда открывается диалоговое окно, и когда пользователь нажимает кнопку "Подробности", я хочу показать удобное для пользователя сообщение, а также более подробное сообщение под удобным для пользователя сообщением. Кнопка "Подробности" использует функцию переключения, чтобы показать / скрыть подробное сообщение.

Диалог определяется так:

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>

Как изменить размер диалогового окна, чтобы оно соответствовало как удобному для пользователя сообщению, так и подробному сообщению, когда пользователь нажимает кнопку "Сведения"? И снова уменьшить размер диалогового окна, когда пользователь нажимает кнопку "Детали", чтобы скрыть подробное сообщение?

Answer 1

Попробуйте изменить размер наложения на детали, нажмите кнопку следующим образом, получив ширину div, который сделан dailog

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'); 
}