Question

我知道有一个JQuery函数ajaxStart（）会在进行ajax调用时显示加载消息，我也知道为加载消息创建一个div，两种方式都显示{{3}但是这些方法都在屏幕的左下角创建了一个我不想要的加载消息。

编辑：我已经使用了我给出的页面上提到的两种方法，但目前我使用的是ajaxStart（）

将其添加为脚本

<script type="text/javascript" charset="utf-8">
$("#loading").ajaxStart(function(){
    $(this).show();
}).ajaxStop(function(){
   $(this).hide();
});
</script>

将其添加到HTML

<div id="loading">
   <p><img src="loading.gif" /> Please Wait</p>
</div>

有没有办法让这些方法中的一个或者在屏幕中央创建加载消息的不同方法？

Answer 1

以下是一些用于在屏幕中央显示对话框的代码。在此示例中，id应该是您的div的"#id"选择器...

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);

另请注意，如果DIV在显示时动态调整大小，则它不会自动调整到屏幕中心，但这在我的使用中很少重要，因为我的对话框通常是固定大小的

Here is a working example

Answer 2

将Please Wait消息放入<div id="loading_text">（例如）。

然后设计它：

#loading_text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -10px;
    line-height: 20px;
    text-align: center;
}

这将使固定叠加层内的单行文本（行高20，负边距为10）居中。

Answer 3

我意识到这篇文章有点晚了，但我找到了一个很好的解决方案，并认为我可能会分享

我把它放在文档就绪函数

中

$('.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');
});

这也可以包含在单独的.js文件中。

然后在我看来我使用

这对我很有用。无论调用什么函数，如果是ajax调用，则显示此加载图像。

Answer 4

您必须以这种方式将其与屏幕中心对齐：

left = (  this.parent().width() / 2   ) - (this.width() / 2 );
top = (  this.parent().height/ 2   ) - (this.height() / 2 );
this.css({top:top,left:left});

使用blew 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>

您还可以在正文$('body').overlay();

上创建叠加层

//使用此代码：

 ;(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：

html{height:100%;width:100%;}
.overlay{width:100%;height:100%;top:0;right:0;position:absolute;background:#000;}

Answer 5

<script type="text/javascript">
$("#loading").ajaxStart(function(){
    $(this).css('position', 'fixed')
             .css('left', '45%')
             .css('top' '45%')
             .show();
}).ajaxStop(function(){
   $(this).hide();
});
</script>

Answer 6

如果你正在使用Bootstrap和Font Awesome，这是一个很好的解决方案：

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 - 处理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 - 加载宽度（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 -->

注意：pointer-events:none;阻止用户点击页面上的任何按钮，输入等its supported IE11+。

JQuery中心屏幕加载消息

6 个答案: