加载未显示在框中答案

【问题标题】：loading not showing within the box加载未显示在框中
【发布时间】：2016-05-25 21:20:51
【问题描述】：

在 ajax 调用期间，我使用 jquery 和 css 来显示带有灰色背景的加载程序。问题是我需要加载器和灰色背景仅在如下所示的框内可见，并在中心加载文本和图标

我的代码工作正常，但灰色背景的加载器显示为整个页面，如下所示。

谁能告诉我一些解决方法

我的代码如下所示

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

【问题讨论】：

标签： javascript jquery html css

【解决方案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的位置。

【讨论】：