javascript 在 AJAX 加载时用图像覆盖 div 块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31789306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overlay div block with the image while AJAX loading
提问by eoozesgg
I know this is easy task and very common, but I cannot figure out how to do this ! It seems five minute task, but I have spent more than an hour... I am stupid I know.
But nevertheless, please help me to implement this.
I have div container block
我知道这是一项简单的任务并且很常见，但我不知道如何做到这一点！看似五分钟的任务，但我花了一个多小时……我知道我很愚蠢。
但是，请帮助我实现这一点。
我有 div 容器块
<div class="wrapper_div">
//some other divs here
</div>
And CSS style
和 CSS 样式
.wrapper_div{
margin: auto;
width: 1000px;
height: 545px;
}
Looks very simple, but I cannot overlay this div when making AJAX request.
I need to simply show loader animation (gif) at the center of this div block and overlay this block with grey background for instance.
That's all what I want, please help. Thank you
看起来很简单，但是我在发出 AJAX 请求时无法覆盖这个 div。
我需要简单地在这个 div 块的中心显示加载器动画（gif），并用灰色背景覆盖这个块。
这就是我想要的，请帮忙。谢谢
EDIT
编辑
Sorry for such explanation, the problem is not in AJAX but in css and html layout, I cannot figure out how to create correct layout
抱歉这样的解释，问题不在 AJAX 中，而是在 css 和 html 布局中，我不知道如何创建正确的布局
回答by Bryan Mudge
When your ajax makes a request you have the 'beforeSend' option. You can either have it load your overlay div and hide it on the 'complete' option for the ajax.
当您的 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
In your css you need your overlay to either have an absoute position or fixed as well:
在您的 css 中，您需要您的叠加层具有绝对位置或固定位置：
#overlay{
position: fixed;
top:50%;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
background: somebackground;
}
回答by CDelaney
You don't have enough detail about your ajax request to give a thorough solution, but maybe this will help. I'm just using a timeout to simulate the request, and setting the overlay display to '' before the timeout, and back to 'none' afterwards.
您没有足够的关于 ajax 请求的详细信息来提供彻底的解决方案，但这也许会有所帮助。我只是使用超时来模拟请求，并在超时之前将覆盖显示设置为“”，然后再设置为“无”。
<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;
}
