CODEWITHSUNDEEP
javascripthtmlcss
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29109

show element on top of a modal dialog

I've this html5 dialog

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

At some point I show it like

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

Now, the dialog is on top of all elements in the page (ignoring z-index) which is what I want (nothing in the page should be clickable for example)

DEMO

However, I have this spinner in my site which gets visible when an API call takes longer than 500ms. The problem is that the spinner is behind the dialog now. Is it possible to have the spinner on top of the modal dialog ?

Upvotes: 5

Views: 2221

Answers (1)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

try this one

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

Now hide and show the spinner.

EDIT CODE :

Try this 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 is the fiddle

Upvotes: 1

Related Questions