1

我有一个 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>

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

4

1 回答 1

2

尝试通过获取制作为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'); 
}
于 2012-05-09T08:38:44.963 回答