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

I have a JQuery dialog that I use to show a message to the user. The dialog have 2 buttons: "Ok" and "Details". The idea is to show a user friendly message when the dialog opens and when the user clicks the "Details" button I want to show the user friendly message plus a more detailed message under the user friendly message. The "Details" button uses the toggle function to show/hide the detailed message.

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

The dialog is defined like this:

对话框的定义如下：

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>

How can I resize the dialog to fit both the user friendly message and the detailed message when the user clicks on the "Details" button? And shrink the dialog size again when the user clicks on the "Details" button to hide the detailed message?

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

1 个解决方案

#1

try to resize the overlay on details button click as follows by getting the width of the div which is made dailog

尝试通过获取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'); 
}

1 个解决方案

#1

更多相关文章

随机推荐