Javascript 在模式对话框顶部显示元素

我有一个html5对话框

<dialog>
    <h1>hello</h1>
</dialog>
<div class="spinner"></div>

现在，对话框位于页面中所有元素的顶部（忽略z索引），这正是我想要的（例如，页面中的任何内容都不应该是可单击的）

然而，我的站点中有一个微调器，当一个API调用花费超过500毫秒时，它就会显示出来。问题是微调器现在位于对话框后面。可以将微调器放在模式对话框的顶部吗？

试试这个

<h1>afefeg</h1>
<dialog>
    <h1>hello</h1>
    <div class="spinner" style="display:block"></div>
</dialog>

---

这是一个

我想他希望旋转器始终处于顶部。是的，这是真的@AndréPacheco，我的

身体中有这个旋转器

，现在我希望它能在这种有趣的方法下工作！！你试过给旋转器一个z指数吗？但它应该高于对话框的z索引。请为它指定一个高z索引，并使用show（）而不是showmodel（）。showModal（）通过设计防止任何其他元素交互

<h1>afefeg</h1>
<dialog>
    <h1>hello</h1>
    <div class="spinner" style="display:block"></div>
</dialog>

 <h1>afefeg</h1>
<dialog class="overlay">
    <h1>hello</h1>

</dialog>

<dialog  class="dailog-spinner" style="width: 50px !important;
  height: 50px !important;
  background-color: transparent !important;
  border: 1px solid blue !important;display:none">
 <div > HI </div>
</dialog>

$(function () {
    $('dialog')[0].show();
     $('.dailog-spinner')[0].showModal();

});