Showing "busy wait" on top of bootstrap modal

Question

I am using "busy wait" for ajax calls:

$(document).ajaxStart(function () {
    $("#wait").css("display", "block");
});
$(document).ajaxComplete(function () {
    $("#wait").css("display", "none");
});
<div id="wait" style="display:none;width:62px;height:62px;position:absolute;top:25%;left:48%; border: 1px solid #2E5C2E;">
<img src='ajax-loader.gif' width="60" height="60"/>

My page performs two ajax calls:

1. modal is not visible
2. When modal is visible

When the modal is not visible, the "busy wait" works fine. However, when I open the modal and do the ajax call "busy wait" gets hidden behind the modal. I am able to see that busy wait if I change the absolute position outside the modal.

I tried modifying the z-index for both modal (z-index:990) and "busy wait" (z-index: 999), however doing so just grays out the whole page because now "busy wait" div is on top. However, if I remove the z-index property or set it to auto or inherit for modal then "busy wait" goes to the back of modal.

How do I make sure that "busy wait" always stay on top without graying out anything else?

JSFiddle: https://jsfiddle.net/81ssrrfj/2/

Try clicking the "open Busy Wait" from inside modal and you will see that "busy wait" gets hidden behind modal (You might have to change the absolute position of busy wait such that it is below modal)

Answer 1

The best solution is to find the z-index of your open modal and apply the same value + 1 to your "wait" icon:

function show_loading() {
    var zIndex = 999;

    if ($('body').hasClass('modal-open')) {
        zIndex = parseInt($('div.modal').css('z-index')) + 1;
    }

    $("#wait").css({
        'display': 'block',
        'z-index': zIndex
    });

    setTimeout(function(){$("#wait").css("display", "none");}, 5000);
};