ボックス内に表示されない

Question

jqueryとcssを使用して、ajax呼び出し中に灰色の背景を持つローダーを表示しました。事は中央

ローディングテキストおよびアイコンで、以下のように私は私のコードは正常に動作しているが、背景がグレーのローダがある

だけのような箱の中に見えるように、ローダと灰色の背景が必要です以下に示すようなフルページを表示します。

誰もが

JSFiddle

ajaxindicatorstart('loading data.. please wait..'); 

    function ajaxindicatorstop() 
    { 
     $('#resultLoading .bg').height('100%'); 
     $('#resultLoading').fadeOut(300); 
     $('.myBox').css('cursor', 'default'); 
    } 

    function ajaxindicatorstart(text) 
    { 
     if($('.myBox').find('#resultLoading').attr('id') != 'resultLoading'){ 
      $('.myBox').append('<div id="resultLoading" style="display:none"><div><img src="http://w3lessons.info/demo/ajax-indicator/ajax-loader.gif"><div>'+text+'</div></div><div class="bg"></div></div>'); 
     } 

     $('#resultLoading').css({ 
      'width':'100%', 
      'height':'100%', 
      'position':'fixed', 
      'z-index':'10000000', 
      'top':'0', 
      'left':'0', 
      'right':'0', 
      'bottom':'0', 
      'margin':'auto' 
     }); 

     $('#resultLoading .bg').css({ 
      'background':'#000000', 
      'opacity':'0.7', 
      'width':'100%', 
      'height':'100%', 
      'position':'absolute', 
      'top':'0' 
     }); 

     $('#resultLoading>div:first').css({ 
      'width': '250px', 
      'height':'75px', 
      'text-align': 'center', 
      'position': 'fixed', 
      'top':'0', 
      'left':'0', 
      'right':'0', 
      'bottom':'0', 
      'margin':'auto', 
      'font-size':'16px', 
      'z-index':'10', 
      'color':'#ffffff' 

     }); 

     $('#resultLoading .bg').height('100%'); 
      $('#resultLoading').fadeIn(300); 
     $('.myBox').css('cursor', 'wait'); 
    } 

Answer 1

以下に示すように、この

私のコードのためのいくつかの解決策があるあなたのローダはこれにかかる、fixedの位置を持って教えてくださいことができます要素の位置ではなくビューポートの位置。

$('#resultLoading>div:first').css({ 
     'width': '250px', 
     'height':'75px', 
     'text-align': 'center', 
     'position': 'absolute', 
     'top':'0', 
     'left':'0', 
     'right':'0', 
     'bottom':'0', 
     'margin':'auto', 
     'font-size':'16px', 
     'z-index':'10', 
     'color':'#ffffff' 

    }); 

    $('#resultLoading').css({ 
     'width':'100%', 
     'height':'100%', 
     'position':'absolute', 
     'z-index':'10000000', 
     'top':'0', 
     'left':'0', 
     'right':'0', 
     'bottom':'0', 
     'margin':'auto' 
    }); 

はまた、あなたの myBox relativeの位置を与えます。