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

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

我将 jquery-ui 1.10.2 与 jquery 3.3.1 一起使用。我也尝试换成较低的 jquery 版本，但错误仍然存​​在。

Answer 1

也许问题只是关于订单...

错误消息说«cannot call methods on dialog before initialization»...
所以如果你先打开它应该没问题。

试试下面的内容：

$("#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()

将对话框移动到对话框堆栈的顶部。

还要注意查找已初始化的对象，例如 ".ui-front.ui-dialog"。

最好更新您的帖子并包含 HTML 内容的示例。目前尚不清楚您可能有多少对话。

Answer 3

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

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

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