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

也许问题仅在于订单...

错误消息显示«初始化前无法在对话框上调用方法» ...
因此，如果您先打开它，那应该没问题。

尝试以下内容：

$("#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 Object上执行它，则可能会遇到一些问题，将它们全部置于“顶部”：

moveToTop（）

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

请注意使用".ui-front.ui-dialog"之类的东西来查找已初始化的对象。

最好更新您的文章，并同时包含HTML内容示例。目前尚不清楚您可能有多少个对话框。

Answer 3

感谢所有建议。我注意到，当moveToTop（）实际上确实将对话框移到最前面时（但是出现js错误），它似乎将对话框与附加对话框分开了，因此提交按钮不再起作用。原来，我使用的导航菜单的css也有一个覆盖div，它会干扰堆栈上下文。

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

我的猜测是，MoveToTop（）不喜欢这样的事实，即对话框不是从正确的堆栈上下文开始的，所以我的用法不正确。

jQuery-UI .dialog（“ moveToTop”）即使成功运行也会引发错误

3 个答案: