我有一个项目,我在其中使用 MVC C#、Bootstrap 和 FontAwesome。
我的目标是在等待 ajax 请求时显示微调器并禁用页面。
到目前为止,我已经通过以下代码成功实现了这个目标:
HTML:
<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
<img src="~/Images/ajax-loader.gif">
</div>
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');
}
});
}
现在,此代码有效,我已禁用该页面并显示一个微调器。 但是,这个微调器也是灰色的,我不希望这种情况发生。
我怎样才能防止这个错误?
最佳答案
所以,经过长时间的搜索,我想出了自己的解决方案:
这是带有纺车、进度条或任何您想要的模态。它位于名为“_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>
我在 View 中使用 @Html.Partial("_WaitModal")
来集成它(但不显示它)。
然后,当我想显示它时,我使用:
$('#pleaseWaitDialog').modal();
并隐藏它:
$('#pleaseWaitDialog').modal('hide');
我希望这对其他人也有帮助!
关于javascript - 在等待 ajax 请求时显示微调器并禁用页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29511873/