[英]Overlay div block with the image while AJAX loading
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. 看起来很简单,但在制作AJAX请求时我无法覆盖这个div。
I need to simply show loader animation (gif) at the center of this div block and overlay this block with grey background for instance. 我需要简单地在div块的中心显示加载器动画(gif),并用灰色背景覆盖这个块。
That's all what I want, please help. 这就是我想要的,请帮忙。 Thank you
谢谢
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布局中,我无法弄清楚如何创建正确的布局
When your ajax makes a request you have the 'beforeSend' option. 当你的ajax提出请求时,你有'beforeSend'选项。 You can either have it load your overlay div and hide it on the 'complete' option for the ajax.
你可以让它加载你的叠加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;
}
You don't have enough detail about your ajax request to give a thorough solution, but maybe this will help. 你没有足够的关于你的ajax请求的详细信息来提供彻底的解决方案,但也许这会有所帮助。 I'm just using a timeout to simulate the request, and setting the overlay display to '' before the timeout, and back to 'none' afterwards.
我只是使用超时来模拟请求,并在超时之前将叠加显示设置为'',然后再返回'无'。
<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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.