在 AJAX 加载时用图像覆盖 div 块答案

【问题标题】：Overlay div block with the image while AJAX loading在 AJAX 加载时用图像覆盖 div 块
【发布时间】：2015-10-25 16:17:48
【问题描述】：

我知道这很容易而且很常见，但我不知道该怎么做！好像是五分钟的任务，但我已经花了一个多小时了……我很笨我知道。
但是，请帮助我实现这一点。
我有 div 容器块

<div class="wrapper_div">
//some other divs here
    </div>

和CSS样式

.wrapper_div{

    margin: auto;

    width: 1000px;

    height: 545px;

}

看起来很简单，但是我在发出 AJAX 请求时无法覆盖这个 div。
我需要简单地在这个 div 块的中心显示加载器动画 (gif)，并用灰色背景覆盖这个块。
这就是我想要的，请帮助。谢谢

编辑

抱歉，问题不在 AJAX 中，而是在 css 和 html 布局中，我不知道如何创建正确的布局

【问题讨论】：

那么您的 Ajax 请求在哪里？开始查询时向包装器添加一个类，并在查询结束时删除该类。在 css 中添加您需要的颜色或您希望与该类关联的背景图像。

标签： javascript jquery html css ajax

【解决方案1】：

当您的 ajax 发出请求时，您有 'beforeSend' 选项。您可以让它加载您的覆盖 div 并将其隐藏在 ajax 的“完整”选项中。

    $.ajax({

    url: "/Home/SomeThing",
    data: {name: name},
    error: function () {

    },
    beforeSend: function () { ShowLoadingScreen(); }, // <Show OverLay

    success: function (data)        
        $('#UnitAjaxDump').html(data);
    },
    type: 'GET',
    complete: function () { HideLoadingScreen(); } //<Hide Overlay

在您的 css 中，您需要叠加层具有绝对位置或固定位置：

#overlay{
   position: fixed;
top:50%;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
background: somebackground;
}

【讨论】：

这将定位您屏幕的 div 死点，只是一个示例。

【解决方案2】：

您没有足够的关于 ajax 请求的详细信息来提供彻底的解决方案，但也许这会有所帮助。我只是使用超时来模拟请求，并在超时之前将覆盖显示设置为“”，然后再设置为“无”。

plnkr

<div>
  <span>My Content</span>
  <button onclick="submitForm()">Submit</button>
</div>
<div id="overlay" style="display: none;"></div>

#overlay {
  background: blue;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: .2;
}

【讨论】：