1

ユーザーにメッセージを表示するために使用する JQuery ダイアログがあります。ダイアログには、「OK」と「詳細」の 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

ダイログに作成された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 に答える