为什么 ui-dialog z-index 没有变化？

Question

我有一个 div 和 z-index: 1000000，并且使用 JQuery UI，我试图在它上面显示一个对话框。所以我在 CSS

中添加了

.ui-dialog{z-index: 1000002 !important;}

但对话框仍在另一个 div 下方，使用 Chrome 检查器查看时，我看到 z-index 为 101。从 Chrome 检查器中我看到：

<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons" aria-describedby="dialog" aria-labelledby="ui-id-3" style="height: auto; width: 300px; top: 379.113px; left: 284.488px; z-index: 101;">

这就像我对 .ui-dialog 的定义没有被阅读，但我不明白为什么。

对话框也是模态的，如果我添加

.ui-front {z-index: 1000001 !important;}

z-index 为 1000000 的 div 上方出现对话框，但我无法单击它（它=对话框）。

你能帮帮我吗？

Edit1：我正在使用 JQuery 3.2.1 和 JQuery UI 1.12.1，Redmond 主题

Edit2: 我正在使用以下代码打开对话框

$("#dialog").dialog({
    autoOpen: false, 
    modal: true,
    draggable: false,
    resizable: false,
    title: title,
});

var buttons = {};
buttons[noButtonName] = function() {
    $( this ).dialog( "close" );
    noFun();
};
buttons[yesButtonName] = function() {   
    $( this ).dialog( "close" );
    okFun();
};
$('#dialog').dialog('option', 'buttons', buttons);
$("#dialog").dialog("open");

Edit3：对话框的 HTML 如下：

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Add</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div> 

    <div class="inline" style="position: relative; width: 100%;" id="dialog">
        <div class="inline">
            <div id="dialogMessage"></div>
        </div>

    </div>

</div>

Answer 1

当我使用更基本的示例时，我无法重现问题。

$(function() {
  function fun(r) {
    console.log(r)
  };

  $("#dialog").dialog({
    classes: {
      "ui-dialog": "inline higher"
    },
    modal: true,
    buttons: {
      Yes: function() {
        fun("yes");
        $(this).dialog("close");
      },
      No: function() {
        fun("no");
        $(this).dialog("close");
      }
    }
  });
});

div.high {
  z-index: 1000000;
}

div.higher {
  z-index: 1000002;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="inline" title="Add" id="dialog">
  <div class="inline">
    <div id="dialogMessage">Want to have some fun?</div>
  </div>
</div>

<div class="high">
  <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</div>

您可以考虑使用 classes 选项将类添加到对话框中。这可能看起来像：

$("#dialog").dialog({
  classes: {
    "ui-dialog": "inline higher"
  }
});

然后您可以在 CSS:

中使用这些

.inline {
  display: inline-block;
}
.higher {
  z-index: 1000001;
}

如果您可以更新您的 post，我或许可以提供进一步的帮助。

为什么 ui-dialog z-index 没有变化？

Why doesn't ui-dialog z-index change?

html

jquery-ui