IE7，JQuery UI对话框

Question

I'm using JQuery UI Dialog. In this form, I validate something.I call this function;

MessageBox('this is message', 'Error', OpenDialog());

In Chrome, Firefox,IE8,IE9; It works correctly but in IE7, only dialog's header shows like this. When I click 'Okey' button, It only shows header How to solve this?

MessageBox function

function MessageBox(text, title,Func) {

var dv = document.createElement('div');

$(function () {

    dv.id = 'Dialog';
    dv.innerHTML = '<table style="font-family:Calibri;"><tr><td>' + text + '</td></tr></table>';       
    document.forms[0].appendChild(dv);
    var dlg = $('#Dialog').dialog({
        autoOpen: false,
        width: 400,
        title: title,
        modal: true,
        resizable: false,

        buttons: [
        {
            text: "Okey",
            width: 80,
            click: function () {
                DialogClose_('Dialog');

            }
        }],
        open: function () {
            $('.ui-dialog-buttonpane').find('button:contains("Okey")').addClass('ButtonDefault');
        },

        close: Func,
        beforeClose: function () {
            var dv2 = document.getElementById("Dialog");
            dv2.parentNode.removeChild(dv2);
        }
    });
    dlg.parent().appendTo(jQuery('form:first'));
    $('#Dialog').dialog("option", "minWidth", 400);
    $('#Dialog').dialog('option', 'position', 'center');
    $('#Dialog').dialog('open');
});
return;

}

OpenDialog function like this;

 function OpenDialog() {
        $(document).ready(function () {
            $("#dialog").dialog("open");
        });
    }

Answer 1

Having a look around there seems to be quite a few issues with the height on dialog boxes in IE7.

You could try specifying a height, but that would take away the nice auto-height feature you get.

Alternatively you could just set the height of the browser just after where you set the "dlg" variable is IE7:

if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
    $('#Dialog').dialog("option", "height", 100);
}

You can replace the "100" with what you think. If you have a container element in your dialog box you can always use that to set the height, eg:

$("#container").height();

There is also more suggestions on StackOverflow .

Hope that helps.