您实际上需要淡入模态。
CSS:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
speak for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;
}
Javascript:
$(document).ajaxStart(function () {
$("body").addClass("loading");
$('.modal').fadeIn(500);
});
$(document).ajaxStop(function () {
$("body").removeClass("loading");
$('.modal').fadeOut(500);
});
// Initiates an AJAX request on click
$(document).on("click", function () {
$.post("/mockjax");
});
// http://code.appendto.com/plugins/jquery-mockjax
$.mockjax({
url: '/mockjax',
responseTime: 2000
});
这是小提琴。