title: loading not showing within the box
body: <p>I have used jquery and css to show a loader with gray background during an ajax call. The thing is I need the loader and the gray background to be visible only within a box like as shown below with loading text and icon in center</p>
  
  <p><a href="https://i.stack.imgur.com/yiPFa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yiPFa.png" alt="enter image description here"></a></p>
  
  <p>My code is working fine but the loader with gray background is showing for the full page like as shown below.</p>
  
  <p><a href="https://i.stack.imgur.com/DbWeO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DbWeO.png" alt="enter image description here"></a></p>
  
  <p>Can anyone please tell me some solution for this</p>
  
  <p>My code is as given below</p>
  
  <p><a href="https://jsfiddle.net/r0zyc6ff/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>    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('&lt;div id="resultLoading" style="display:none"&gt;&lt;div&gt;&lt;img src="http://w3lessons.info/demo/ajax-indicator/ajax-loader.gif"&gt;&lt;div&gt;'+text+'&lt;/div&gt;&lt;/div&gt;&lt;div class="bg"&gt;&lt;/div&gt;&lt;/div&gt;');
          }
  
          $('#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&gt;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');
      }
  </code></pre>