我有这样的代码,用于将远程php数据加载到引导模式框中:
$(function() {
$(window).bind("resize", function() {
if ($(this).width() < 400) {
$('#tabs-content').removeClass('col-xs-10').addClass('col-xs-12')
} else {
$('#tabs-content').removeClass('col-xs-12').addClass('col-xs-10')
}
}).resize();
});
$(function() {
$(document).on('click', '.push', function(e) {
e.preventDefault();
var id = $(this).attr('id');
$.ajax({
type: 'post',
url: 'details.php', // in here you should put your query
data: {
'bookid': id,
'lang': 'fa',
'csrf_token': 'MTQ0OTQxNDQ0MUVvN2JwNXNJRHVxMDZmOXFpQm1ROFNNTk1UZ3lPMGZO'
},
success: function(r) {
// now you can show output in your modal
$('#bookdetails').modal({
backdrop: 'static',
keyboard: false
}) // put your modal id
$('.something').show().html(r);
}
});
});
});
这对我有效,但我需要在加载数据之前显示加载message/image
。
如何添加等待消息/图标?!
您只需要在Ajax call
之前显示image/message
并将其隐藏在success: function(r)
中
假设您有在模式加载前显示的图像,图像HTML,例如
<img class="progress" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" style="display:none;">
在JS中,只使用.show()
函数显示图像,在success: function(r)
中的模态加载后,隐藏使用.hide()
函数
$(document).on('click', '.push', function(e) {
e.preventDefault();
var id = $(this).attr('id');
$(".progress").show(); // <-- Show progress image
$.ajax({
type: 'post',
url: 'details.php', // in here you should put your query
data: {
'bookid': id,
'lang': 'fa',
'csrf_token': 'MTQ0OTQxNDQ0MUVvN2JwNXNJRHVxMDZmOXFpQm1ROFNNTk1UZ3lPMGZO'
},
success: function(r) {
// now you can show output in your modal
$('#bookdetails').modal({
backdrop: 'static',
keyboard: false
}) // put your modal id
$('.something').show().html(r);
$(".progress").hide(); // <-- Hide progress image
}
});
});
具有延迟和衰落的最小示例