Javascript 在等待 ajax 请求时显示微调器并禁用页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29511873/
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
Show spinner and disable page while waiting for ajax request
提问by Flame_Phoenix
I have a project in which I use MVC C#, with Bootstrap and FontAwesome.
我有一个项目，我在其中使用 MVC C#、Bootstrap 和 FontAwesome。
My objective is to show a spinner and disable the page while waiting for an ajax request.
我的目标是在等待 ajax 请求时显示一个微调器并禁用页面。
So far, I have successfully acomplished this goal with the following code:
到目前为止，我已经使用以下代码成功实现了这个目标：
HTML:
HTML：
<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
<img src="~/Images/ajax-loader.gif">
</div>
JS:
JS：
function blablabla() {
//show spinner, disable page
var modal = $('<div>').dialog({ modal: true });
modal.dialog('widget').hide();
$('#ajax_loader').show();
$.ajax({
type: "Get",
url: url,
success: function (result) {
alert("success! " + result);
},
error: function(result) {
alert("error!" + result);
},
complete: function () {
//back to normal!
$('#ajax_loader').hide();
modal.dialog('close');
}
});
}
Now, this code works, I have the page disabled and I show a spinner. However, this spinner is also grayed out, and I do not want that to happen.
现在，此代码有效，我禁用了页面并显示了一个微调器。 但是，这个微调器也变灰了，我不希望这种情况发生。
How can I prevent this bug ?
我怎样才能防止这个错误？
回答by Flame_Phoenix
So, after a long search, I came up with my own solution:
所以，经过长时间的搜索，我想出了我自己的解决方案：
This is the modal with the spinning wheel, or progress bar, or anything you want to. It is in a partial file called "_WaitModal"
这是带有旋转轮、进度条或任何您想要的模式的模式。它位于名为“_WaitModal”的部分文件中
<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
<div class="modal-header">
<h1>Please Wait</h1>
</div>
<div class="modal-body">
<div id="ajax_loader">
<img src="~/Images/ajax-loader.gif" style="display: block; margin-left: auto; margin-right: auto;">
</div>
</div>
</div>
I use @Html.Partial("_WaitModal")in the view to integrate it (but not show it).
我@Html.Partial("_WaitModal")在视图中使用它来集成它（但不显示它）。
Then, when I want to show it, I use:
然后，当我想展示它时，我使用：
$('#pleaseWaitDialog').modal();
and to hide it:
并隐藏它：
$('#pleaseWaitDialog').modal('hide');
I hope this helps other people as well!
我希望这也能帮助其他人！
回答by Aru
try this..
尝试这个..
Html
html
<button>Click Me</button>
<div class="ajax_loader hidden"><i class="fa fa-spinner fa-spin"></i></div>
CSS
CSS
body{
position:relative;
}
.hidden{
display:none;
}
.ajax_loader{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:rgba(0,0,0,.5);
}
.ajax_loader i{
position:absolute;
left:50%;
top:50%;
}
Script
脚本
$("button").click(function () {
$(".hidden").show();
});
