ajax loader div在滚动时不出现在全屏幕上

Question

我正在使用jquery ajax，并且我想在ajax工作时显示加载程序gif图像。加载程序显示正确，但是当用户在加载程序显示加载程序移出屏幕或更改大小时滚动或调整窗口大小时。我希望加载程序能够全屏固定，这样即使用户滚动，它也不会从视图中消失。

这里是我的jQuery代码

jQuery.ajaxSetup({ 
    beforeSend: function() { 
    $('#loader').show(); 
    }, 
    complete: function(){  
    $('#loader').hide(); 
    }, 
    success: function() {} 
}); 

，这里是装载机的CSS和其内部的div

<style> 
#loader 
{ 
    background-color: #e8e8e8; 
    width: 100%; 
    height: auto; 
    bottom: 0px; 
    top: 0px; 
    left: 0; 
    position: absolute; 
    opacity: 0.5; 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
    display:none; 
} 
#center { 
    position: absolute; 
    width: 100px; 
    height: 50px; 
    top: 50%; 
    left: 50%; 
    margin-top: -25px; // margin is -0.5 * dimension 
    margin-left: -50px; 
    z-index:5; 
} 



</style> 

和HTML是遵循

<div id="loader" > 
    <div id="center"> 
     <img src="images/loading.gif" /> 
    <div> 
</div> 

，在这里你可以检查my test page

Answer 1

这就是我将如何使用标记水平和垂直粗略加载器映像的中心。

body { 
    height:100%; 
    margin:0; 
    padding:0; 
} 

#center { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    top: 40%; 
    left: 0px; 
    width: 100%; 
} 

#loader { 
    background-color: red; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width:100%; 
    height:100%; 
    text-align:center; 
    z-index: 1000; 
    opacity: 0.5; 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
} 
​ 

继承人一个jsbin，显示结果。

http://jsbin.com/owaciy/2/

**更新**

通过与position:fixed更换position:absolute，你应该能达到预期的效果：

http://jsbin.com/owaciy/3