javascript - 加载未显示在框内

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，它采用视口(viewport)的位置而不是元素的位置。

    $('#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的位置。