JQuery 对话框显示在火狐中

Question

我有时在显示常规 JQuery 对话框时遇到问题。我的代码是这样的：

<div  id="instructor-dialog" title="Instructor Dialog" style="display:none;">
  <fieldset>
    <legend>Instructor Information :</legend>
    <div id="instructorMessages" style="display:none;"></div>
    <div id="instructorContainer"></div>
  </fieldset>
</div>

和初始化：

function loadInstructorDialog(id) {
  $(function () {
    $("#instructor-dialog").dialog({
        autoOpen: false,
        height: getDialogHeight(700),
        width: getDialogWidth(700),
        modal: true,
        buttons: {
            "Close Window": function () {
                $(this).dialog("close");
            }
        },
        open: function () {
            $('#instructorMessages').empty();
            $('#instructorMessages').hide();
            ajLoadInstructorAddEditForm(id, 'instructorContainer', 'instructorMessages');
        },
        close: function () {
            $('#instructorContainer').empty();
            $(this).dialog("close");
        }
    });
  });
  $("#instructor-dialog").dialog("open");
}

问题是，当我调用函数时loadInstructorDialog有时对话框显示正常，有时显示不正常。 通常前几次它会显示，然后在第 3 次或第 4 次显示。当它不显示时，页面上没有其他任何东西可以单击（似乎对话框打开但没有显示 - 当我将鼠标悬停在对话框标题应该在的位置上时，我得到了通常的移动 - 调整光标的大小表明对话框已打开但未显示）。当我手动调整 Firefox 窗口的大小时，将显示对话框（当我切换浏览器选项卡时，对话框也会显示）。控制台中未显示任何问题...（太奇怪了...

还有其他人遇到过这个问题吗？

哦，顺便说一句，相同的代码似乎在 Chrome 中工作正常。

如果有人能透露一些光芒....

Answer 1

将对话框的初始化排除在 loadInstructorDialog(id) 函数之外。

function loadInstructorDialog(id) {  
  $("#instructor-dialog").dialog("open");
}
$(function () {
    $("#instructor-dialog").dialog({
        autoOpen: false,
        height: getDialogHeight(700),
        width: getDialogWidth(700),
        modal: true,
        buttons: {
            "Close Window": function () {
                $(this).dialog("close");
            }
        },
        open: function () {
            $('#instructorMessages').empty();
            $('#instructorMessages').hide();
            ajLoadInstructorAddEditForm(id, 'instructorContainer', 'instructorMessages');
        },
        close: function () {
            $('#instructorContainer').empty();
            $(this).dialog("close");
        }
    });
  });