JQuery 中心屏幕加载消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10547907/
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
JQuery center screen loading message
提问by newSpringer
I am aware that there is a JQuery function ajaxStart() that will display a loading message when ever a ajax call is made, i am also aware of creating a div for the loading message, both ways are shown herebut these methods both create a loading message at the bottom left corner of the screen which i dont want.
我知道有一个 JQuery 函数 ajaxStart() 会在进行 ajax 调用时显示加载消息，我也知道为加载消息创建一个 div，这里显示了两种方式，但这些方法都创建了一个在屏幕左下角加载我不想要的消息。
EDIT: I have used both methods mentioned on the page i gave but at the moment i am using the ajaxStart()
编辑：我已经使用了我给出的页面上提到的两种方法，但目前我正在使用 ajaxStart()
add this as a script
将此添加为脚本
<script type="text/javascript" charset="utf-8">
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
</script>
add this to the HTML
将此添加到 HTML
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
Is there a way to either center one of these methods or a different method which creates a loading message in the center of the screen?
有没有办法将这些方法之一或另一种方法居中，以在屏幕中央创建加载消息？
回答by musefan
Here is some code that I use to make a dialog box appear in the center of the screen. IN this example, idshould be the "#id"selector for your div...
这是我用来使对话框出现在屏幕中央的一些代码。在这个例子中，id应该是"#id"你的 div的选择器...
var winH = $(window).height();
var winW = $(window).width();
var dialog = $(id);
var maxheight = dialog.css("max-height");
var maxwidth = dialog.css("max-width");
var dialogheight = dialog.height();
var dialogwidth = dialog.width();
if (maxheight != "none") {
dialogheight = Number(maxheight.replace("px", ""));
}
if (maxwidth != "none") {
dialogwidth = Number(maxwidth.replace("px", ""));
}
dialog.css('top', winH / 2 - dialogheight / 2);
dialog.css('left', winW / 2 - dialogwidth / 2);
Also note, that if the DIV resizes dynamically while it is display then it will not auto adjust to the center of the screen, but that rarely matters in my use as my dialogs are generally a fixed sized
另请注意，如果 DIV 在显示时动态调整大小，则它不会自动调整到屏幕的中心，但这对我的使用很少有影响，因为我的对话框通常是固定大小的
回答by ori
Put your Please Waitmessage in a <div id="loading_text">(for example).
将您的Please Wait消息放在<div id="loading_text">（例如）中。
Then style it:
然后样式：
#loading_text {
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -10px;
line-height: 20px;
text-align: center;
}
This would center a single line of text (line height 20, negative margin of 10) inside the fixed overlay.
这会将单行文本（行高 20，负边距 10）居中放置在固定覆盖层内。
回答by feez8541
I realize this post is a little late, but I found a nice solution to this and thought I might share
我意识到这篇文章有点晚了，但我找到了一个很好的解决方案，并认为我可以分享
I put this inside of the document ready function
我把它放在文档就绪函数中
$('.progress').ajaxStart(function () {
$(this).dialog({
title: "Loading data...",
modal: true,
width: 50,
height: 100,
closeOnEscape: false,
resizable: false,
open: function () {
$(".ui-dialog-titlebar-close", $(this).parent()).hide(); //hides the little 'x' button
}
});
}).ajaxStop(function () {
$(this).dialog('close');
});
This can be contained in a separate .js file as well.
这也可以包含在单独的 .js 文件中。
Then in my view i use
然后在我看来我使用
This works great for me. No matter what function is being called, if its an ajax call, then this loading image is displayed.
这对我很有用。无论调用什么函数，如果是ajax调用，都会显示这个加载图片。
回答by Lester S
<script type="text/javascript">
$("#loading").ajaxStart(function(){
$(this).css('position', 'fixed')
.css('left', '45%')
.css('top' '45%')
.show();
}).ajaxStop(function(){
$(this).hide();
});
</script>
回答by Roy Shoa
If you are using Bootstrapand Font Awesomehere is nice solution:
如果您使用Bootstrap和Font Awesome，这里是不错的解决方案：
HTML -Your loading message (icon) need to be placed outside from your main container:
HTML -您的加载消息（图标）需要放置在主容器之外：
<!-- Page -->
<div class="page-content">
My Content
</div>
<!-- Loading -->
<div id="loading" class="text-center hidden">
<i class="fa fa-spinner fa-spin blue fa-4x"></i>
</div>
jQuery -To handle the Ajax requests.
jQuery -处理 Ajax 请求。
//Run when the page load (before images and other resource)
jQuery(function($) {
//Ajax Loading Message
$(document).ajaxStart( function() {
$(".page-content").addClass('disabled');
$('#loading').removeClass('hidden');
}).ajaxStop( function() {
$(".page-content").removeClass('disabled');
$('#loading').addClass('hidden');
});
});
CSS -The loading width (26px) need to be equal to your loading icon width, and the background color (#fff) need to be equal to your .page-contentbackground color.
CSS -加载宽度 (26px) 需要等于您的加载图标宽度，背景颜色 (#fff) 需要等于您的.page-content背景颜色。
<!-- Style -->
<style>
/* Ajax Disable */
.page-content.disabled {
pointer-events: none;
opacity: 0.65;
}
#loading {
position: fixed;
top: calc(50% - 26px);
left: calc(50% - 26px);
z-index: 999;
background: #fff;
}
</style>
<!-- Style -->
Note: The pointer-events:none;is preventing from the user to click on any button, input, etc on the page, its supported IE11+.
注意：pointer-events:none;防止用户点击页面上的任何按钮、输入等，其支持 IE11+。
回答by Hadi Mostafapour
you must align it to center of screen in this way:
您必须以这种方式将其与屏幕中心对齐：
left = ( this.parent().width() / 2 ) - (this.width() / 2 );
top = ( this.parent().height/ 2 ) - (this.height() / 2 );
this.css({top:top,left:left});
use blew jQuery plugin, and call
使用自爆 jQuery 插件，并调用
<script type="text/javascript" charset="utf-8">
$("#loading").ajaxStart(function(){
$(this).show().align(); // for absolute position pass {position:'absolute'}
}).ajaxStop(function(){
$(this).hide();
});
</script>
you can also create an overlay on body $('body').overlay();
您还可以在身体上创建叠加层 $('body').overlay();
// use this code:
// 使用这个代码：
;(function($){
$.extend($.fn,{
// Overlay ; $(body).overlay();
overlay: function(o){
var d={
addClass:'',
css:{},
opacity:0.5,
autoOpen:true,
zIndex:998,
onOpen:function(){x.show();},
onClose:function(){x.hide();},
onRemove:function(){x.remove();}
},x,l;
// Merge Options
o=$.extend({},d,o);
// Create overlay element
x=$('<div>',{css:{opacity:o.opacity,zIndex:o.zIndex}}).css(o.css).addClass('overlay '+o.addClass).hide().appendTo(this);
// If appended to body element, set position fixed
this[0].tagName.toLowerCase()=="body"&&x.css("position","fixed");
// Overlay Control Object
l = {
remove:function(){o.onRemove(l)},
open:function(){o.onOpen(l)},
close:function(){o.onClose(l)},
obj:x
};
// Call On Show
o.autoOpen&& o.onOpen(l);
// Return Object
return l;
},
align:function(o){
var d={
x:'center',
y:'center',
position:'fixed',
parent:window
};
o=$.extend({},d,o);
var c=$(o.parent),
t=$(this),
s=c.scrollTop(),
top,
left;
t.css('position',o.position); // Set Css Position
if(o.y)top = o.y=='center' ? (c.height()/2) - (t.innerHeight()/2) : o.y;
if(o.x)left = o.x=='center' ? (c.width()/2) - (t.innerWidth()/2) : o.x;
if(o.position=='absolute') top += s; // For absolute position
if(top<0) top=0;
t.css({top:top,left:left});
},
});
})(jQuery);
css for overlay:
用于叠加的 css：
html{height:100%;width:100%;}
.overlay{width:100%;height:100%;top:0;right:0;position:absolute;background:#000;}
