javascript - 在模态对话框顶部显示元素

Question

我有这个 html5 对话框

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

在某些时候我表现得像

$('dialog')[0].showModal();

现在，对话框位于页面中所有元素的顶部(忽略 z-index)，这正是我想要的(例如，页面中的任何内容都不应是可点击的)

DEMO

但是，我的站点中有这个微调器，当 API 调用时间超过 500 毫秒时它会显示。问题是微调器现在在对话框后面。是否可以将微调器置于模态对话框之上？

Answer 1

试试这个

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

现在隐藏和显示微调器。

编辑代码:

试试这个。

HTML

 <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>

JS:

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

});

这是 fiddle