javascript - show element on top of a modal dialog -

i've html5 dialog

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

at point show like

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

now, dialog on top of elements in page (ignoring z-index) want (nothing in page should clickable example)

demo

however, have spinner in site gets visible when api call takes longer 500ms. problem spinner behind dialog now. possible have spinner on top of modal dialog ?

try one

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

now hide , show spinner.

edit code :

try one.

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

here fiddle