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");
        }
    });
  });

在Firefox中显示JQuery对话框

1 个答案: