How to have a Loading Spinner Animation on top of a Bootstrap Modal

Question

I am trying to have a spinner animation on button click. This Works fine from a page when there is no Bootstrap Modal Open. But when a Bootstrap Modal is Open, the Spinner hides behind the Bootstrap Modal

I have tried this

Expecting the Spinner to be above the Modal Bootstrap

Answer 1

Change the place of your loadingoverlay. the loadingoverlay has to be in the modal.

Example

Need to also give the setInterval for javascript spinner.

Answer 2

You have to give a bigger z-index to the Loading Spinner, than the Modal's z-index.

Let's try this:

#loadingoverlay {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.6);
}

Answer 3

Provide the z-index value. Thats creating issue

z-index: 9999;