装载没有显示在框内(loading not showing within the box)

 在ajax调用期间，我使用jquery和css显示带有灰色背景的加载器。 问题是我需要加载器和灰色背景只能在如下所示的框中可见，并在中心加载文本和图标 
 
  
 
 我的代码工作正常，但灰色背景的加载器显示整个页面，如下所示。 
 
  
 
 任何人都可以告诉我一些解决方案 
 
 我的代码如下所示 
 
 的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');
    }

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
 
 
My code is working fine but the loader with gray background is showing for the full page like as shown below.
 
 
Can anyone please tell me some solution for this
 
My code is as given below
 
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');
    }

原文：https://stackoverflow.com/questions/37437842