Question

我知道这很容易，很常见，但我无法弄清楚如何做到这一点！这似乎是五分钟的任务，但我花了一个多小时......我知道我很愚蠢但是，请帮助我实现这一点我有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布局中，我无法弄清楚如何创建正确的布局

Answer 1

当您的ajax提出请求时，您需要先发送＆＃39; beforeSend＆＃39;选项。你可以让它加载你的叠加div并将其隐藏在＆＃39;完成＆＃39; 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;
}

Answer 2

您没有足够详细了解您的ajax请求以提供全面的解决方案，但也许这会有所帮助。我只是使用超时来模拟请求，并将叠加显示设置为＆＃39;＆＃39;＆＃39;在超时之前，回到“没有”＃39;之后。

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

AJAX加载

2 个答案: