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调用：

模态不可见
当模态可见时

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

我尝试为模态（z-index：990）和“忙等待”（z-index：999）修改z-index，但是这样做只会使整个页面灰显，因为现在“忙碌的等待”div位居榜首。但是，如果我删除z-index属性或将其设置为auto或inherit以获取模态，则“忙等待”将转到模态的后面。

如何确保“忙碌的等待”始终保持在最佳状态而不会使其他任何事情变得灰暗？

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

尝试从内部模态中单击“打开忙等待”，您将看到“忙等待”隐藏在模态后面（您可能必须更改忙等待的绝对位置，使其低于模态）

Answer 1

最佳解决方案是找到您的开放模式的z-index并将相同的value + 1应用于您的等待＆＃34;图标：

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

在bootstrap模式上显示“忙等待”

1 个答案: