如何在ajax加载时显示灯箱背景

Question

我一直在尝试在整个屏幕上显示带有透明灯箱类型背景的ajax loader / spinner图像。请问。

Answer 1

检查这些：

http://codepen.io/collection/HtAne

选择其中一个.loaders - 将其放入#loaderContainer然后：

#loaderContainer{
     position:absolute; // or fixed
     background-color:rgba(0,0,0,0.6); //to your preference
     width:100%; height:100%;
     top:0; left:0; bottom:0; right:0; // not always necessary
     text-align:center; vertical-align:middle; 
//you'll have to tweak it to get it centered, but it shouldn't be too hard

}

Answer 2

我经常使用的策略。

1. 制作一个包含div
2. 创建一个将在透明背后修复的子div
3. 创建一个将加载动画作为背景的兄弟div

原因是您可以使透明灯箱具有自己的透明度，并且加载gif将处于完全不透明度

CSS

.modal-overlay {
  background: #000000;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

#ajaxLoadingBox {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 60px;
  width: 60px;
  background: #333 url('../img/loader.gif') no-repeat;
  border-radius: 10px;
}

HTML

<!-- ajax loading dialog -->
<div>
  <div class="modal-overlay"></div>
  <div id="ajaxLoadingBox"></div>
</div>