javascript - 在 Bootstrap 模式顶部显示 "busy wait"

Question

我正在为 ajax 调用使用“忙等待”:

$(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"/>

我的页面执行两个 ajax 调用:

1. 模态不可见
2. 当模式可见时

当模式不可见时，“忙等待”工作正常。但是，当我打开模式并执行 ajax 调用时，“忙等待”隐藏在模式后面。如果我改变模式外的绝对位置，我就能看到忙碌的等待。

我尝试修改模态 (z-index:990) 和“忙等待”(z-index) 的 z-index : 999)，但是这样做只会使整个页面变灰，因为现在“忙等待”div 位于顶部。但是，如果我删除 z-index 属性或将其设置为 auto 或 inherit 模态，则“忙等待”会转到模态。

如何确保“忙等待”始终位于最前面而不会使其他任何内容变灰？

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

尝试从模态内点击“open Busy Wait”，您会看到“busy wait”隐藏在模态后面(您可能必须更改 busy wait 的绝对位置，使其在模态下方)

Answer 1

最好的解决方案是找到打开模式的 z-index 并将相同的 value + 1 应用于“等待”图标:

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