Question

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

对话框的定义如下：

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

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

1 个答案: