4

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

编辑：我已经使用了我给出的页面上提到的两种方法，但目前我正在使用 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>

有没有办法将这些方法中的一种或另一种在屏幕中心创建加载消息的方法居中？

4

6 回答 6

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）居中固定叠加层内。

于 2012-05-11T08:34:11.520 回答
2

这是我用来使对话框出现在屏幕中央的一些代码。在此示例中，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);

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

这是一个工作示例

于 2012-05-11T08:29:40.210 回答
1

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

我把它放在文档准备功能中

$('.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 调用，就会显示这个加载图像。

于 2012-06-14T16:47:28.543 回答
0 
<script type="text/javascript">
$("#loading").ajaxStart(function(){
    $(this).css('position', 'fixed')
             .css('left', '45%')
             .css('top' '45%')
             .show();
}).ajaxStop(function(){
   $(this).hide();
});
</script>
于 2012-08-29T22:50:01.340 回答
0

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

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

使用自爆 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;}
于 2012-05-11T08:34:52.740 回答
0

如果您使用的是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;防止用户点击页面上的任何按钮、输入等，它支持 IE11+。

于 2016-04-22T07:40:20.923 回答