php - 滚动时ajax加载器div没有出现在全屏上

Question

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

这是我的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:absolute 替换为 position:fixed，您应该能够获得所需的结果:

http://jsbin.com/owaciy/3