JQuery Firefox 中的对话框显示

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 window 的大小时，会显示该对话框（当我切换浏览器选项卡时也会显示该对话框）。控制台中没有显示任何问题...（太奇怪了...）。

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

哦顺便说一句，相同的代码似乎在 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");
        }
    });
  });

JQuery Firefox 中的对话框显示

JQuery Dialog display in firefox

jquery

jquery-dialog