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

show element on top of a modal dialog

本文关键字：显示 元素 顶部 对话框 模态      更新时间：2023-09-26

我有这个html5对话框

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

在某处我显示为

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

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

演示

然而，我有这个旋转器在我的网站，当API调用需要超过500毫秒可见。问题是现在旋转器在对话框后面。有可能在模态对话框的顶部有旋转器吗?

试试这个

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

现在隐藏和显示旋转控件。

EDIT CODE:

试试这个

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

小提琴来了

相关文章：