Сообщение загрузки экрана в центре JQuery

Question

Я знаю, что есть функция JQuery ajaxStart(), которая будет отображать загружаемое сообщение, когда когда-либо выполняется ajax-вызов, я также знаю о создании div для сообщения загрузки, оба способа показаны here, но эти методы создают сообщение загрузки в левом нижнем углу экрана, который я не хочу.

EDIT: Я использовал оба метода, упомянутые на странице я дал, но на данный момент я использую 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 должен быть "#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 динамически изменяет размер в то время как это дисплей, то он не будет автоматически приспосабливаются к центру экрана, но что редко имеет значение в моем использовании, как мои диалоги, как правило, фиксированный размер

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

вы должны привести его к центру экрана таким образом:

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

Answer 4

Я понимаю, что этот пост немного поздно, но я нашел хорошее решение этой проблемы, и думал, что я мог бы поделиться

я положил эту внутреннюю часть документа готовой функции

$('.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 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+.