jQuery-UI .dialog("moveToTop") 即使成功运行也会引发错误

Question

我在 Jquery 对话框打开后调用 dialog("moveToTop") 时遇到问题。我之所以这样称呼它是因为我的模态对话框出现在覆盖层下（它们需要附加到一个特定的表单，而不是在与叠加层相同的堆叠上下文中）并且所有手动强制各种元素的 z-index 的尝试都没有奏效。让叠加层不可见是不可接受的。

我希望在打开的任何 jquery-ui 对话框上调用 .dialog("moveToTop"):

    $(document).on("dialogopen", ".ui-front", function (event, ui) {

        $(document).dialog("moveToTop");

    });

这似乎有效。我的对话框现在位于叠加层之上。但是我在控制台中收到此错误：

  Uncaught Error: cannot call methods on dialog prior to initialization;
 attempted to call method 'moveToTop'
    at Function.error (jquery-1.10.2.min.js:21)
    at HTMLDocument.<anonymous> (jquery-ui.min.js:6)
    at Function.each (jquery-1.10.2.min.js:21)
    at init.each (jquery-1.10.2.min.js:21)
    at init.t.fn.(:52727/anonymous function) [as dialog] (http://localhost:52727/scripts/jquery-ui/jquery-ui.min.js:6:5357)
    at HTMLDivElement.<anonymous> (cmsfunctions.js:79)
    at HTMLDocument.dispatch (jquery-1.10.2.min.js:22)
    at HTMLDocument.v.handle (jquery-1.10.2.min.js:22)
    at Object.trigger (jquery-1.10.2.min.js:22)
    at HTMLDivElement.<anonymous> (jquery-1.10.2.min.js:22)
error @ jquery-1.10.2.min.js:21
(anonymous) @ jquery-ui.min.js:6
each @ jquery-1.10.2.min.js:21
each @ jquery-1.10.2.min.js:21
t.fn.(anonymous function) @ jquery-ui.min.js:6
(anonymous) @ cmsfunctions.js:79
dispatch @ jquery-1.10.2.min.js:22
v.handle @ jquery-1.10.2.min.js:22
trigger @ jquery-1.10.2.min.js:22
(anonymous) @ jquery-1.10.2.min.js:22
each @ jquery-1.10.2.min.js:21
each @ jquery-1.10.2.min.js:21
trigger @ jquery-1.10.2.min.js:22
_trigger @ jquery-ui.min.js:6
open @ jquery-ui.min.js:10
(anonymous) @ jquery-ui.min.js:6
(anonymous) @ jquery-ui.min.js:6
each @ jquery-1.10.2.min.js:21
each @ jquery-1.10.2.min.js:21
t.fn.(anonymous function) @ jquery-ui.min.js:6
(anonymous) @ cmsfunctions.js:110
dispatch @ jquery-1.10.2.min.js:22
v.handle @ jquery-1.10.2.min.js:22

以下代码根本不会将对话框移动到叠加层上方：

$("#btnOpenDialog").click(function () {

        var tmpdlg = $("#popDialog").dialog({
            modal: true,
            autoOpen: false,
            width: 530,
            height: 520,
            title: "Template Picker"

        });
        $('#popDialog').dialog('moveToTop');
        $('#popDialog').dialog('open');

        tmpdlg.parent().appendTo(jQuery("form#contentform"));

        // prevent the default button action
        return false;
    });

我试过只将事件侦听器附加到特定对话框，但什么也没有发生。当我使用此 post 开头的代码时，该对话框仅出现在叠加层上方。任何人都可以解释错误的含义吗？我的代码是否在未初始化的对话框上循环？如果是这样，我怎样才能使其更具体并仍然获得所需的结果？

我正在使用 jquery-ui 1.10.2 和 jquery 3.3.1。我也尝试换成较低的 jquery 版本，但错误仍然存在。

Answer 1

可能只是顺序的问题...

错误消息显示«初始化之前无法在对话框上调用方法»...
所以如果你先打开它应该就可以了。

试试下面的方法：

$("#btnOpenDialog").click(function () {

  var tmpdlg = $("#popDialog").dialog({
      modal: true,
      autoOpen: false,
      width: 530,
      height: 520,
      title: "Template Picker"

  });

  // Append
  tmpdlg.parent().appendTo(jQuery("form#contentform"));

  // Open
  $('#popDialog').dialog('open');

  // Mov to top
  $('#popDialog').dialog('moveToTop');

  // prevent the default button action
  return false;
});

Answer 2

建议测试这个：

$("#btnOpenDialog").click(function (e) {
  e.preventDefault();
  var tmpdlg = $("#popDialog").dialog({
    modal: true,
    autoOpen: false,
    width: 530,
    height: 520,
    title: "Template Picker"
  }).dialog('open').dialog('moveToTop');

  tmpdlg.parent().appendTo($("form#contentform"));
});

根据错误，jQuery 似乎不知道它已被初始化为对话框。这可能与代码执行得太快有关。链接代码可能有助于组织它。

如果您计划在包含许多对象 ($(".ui-front")) 的 jQuery 对象上执行它，您可能会遇到一些问题，将它们全部放到“顶部”：

moveToTop()

Moves the dialog to the top of the dialog stack.

也会注意寻找已初始化的对象，使用 ".ui-front.ui-dialog".

之类的东西

最好更新您的 post 并包括 HTML 内容的示例。不清楚您可能有多少对话。

Answer 3

感谢所有建议。我注意到，当 moveToTop() 实际上确实将对话框移到前面时（但出现 js 错误），它似乎将对话框从附加到它的表单中分离出来，因此提交按钮无论如何都不再起作用。事实证明，我使用的导航菜单的 css 也有一个叠加层 div，它干扰了堆叠上下文。

我的解决方法是将#contentform 放在#contentdiv 之外，然后附加的对话框与叠加层位于相同的堆栈上下文中，这意味着调用 MoveToTop() 的需要消失了。必须将 #contentdiv 放入每个 razor 视图而不是将它放在主布局文件中，这很麻烦，但这似乎是必要的。

我的猜测是 MoveToTop() 不喜欢对话框开始时不在正确的堆叠上下文中这一事实，所以我对它的使用是不正确的。

jQuery-UI .dialog("moveToTop") 即使成功运行也会引发错误

jQuery-UI .dialog("moveToTop") is throwing an error even though it worked successfully

jquery

jquery-ui

jquery-ui-dialog