jquery覆盖加载栏div

Question

所以我有一个数据表，并且我正在使用ajax获取数据。在检索数据时，表中的数据会消失，并出现一个小小的装入圆圈。我更希望数据留下来(我知道怎么做)，让加载圆圈出现在表格的中央(不一定是垂直的，至少是水平的)，还有一个稍微透明的背景，稍微遮挡了表格的视图(而不是网页的其余部分)。我怎样才能让一个div出现在表的上方并做到这一点？

Answer 1

只需使用jQuery的.html()方法将带有加载循环的新div注入到包含表的div中。然后使用css对其进行样式设置。也许可以给它一个不透明的背景图像。并且相对或绝对地定位加载圆。

假设你有：

<div id="table_container>
    <table>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
    </table>
</div>

加载新数据时，请使用：

$('div#table_container').html('<div id="overlay"><img src="path/to/loading/img.png" class="loading_circle" alt="loading" /></div>');

并设置如下样式：

#overlay {
    width: 100%;
    background: url('path/to/opaque/img.png') repeat;
    position: relative;
}

#overlay img.loading_circle {
    position: absolute;
    top: 50%;  // edit these values to give you
    left: 50%; // the positioning you're looking for.
}

Answer 2

[See it in action]

HTML

<div id="overlay">
  <img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif" 
    id="img-load" />
</div>

CSS

#overlay { 
  display:none; 
  position:absolute; 
  background:#fff; 
}
#img-load { 
  position:absolute; 
}

Javascript

$t = $("#table"); // CHANGE it to the table's id you have

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight()
});

$("#img-load").css({
  top  : ($t.height() / 2),
  left : ($t.width() / 2)
});

然后，当你加载东西时，你只需说：

$("#overlay").fadeIn();

当你完成的时候：

$("#overlay").fadeOut();

注意：加载图像会按照要求在垂直和水平方向居中显示。此外，只有表将有覆盖，而不是整个页面的请求。

Answer 3

这对我来说很有效，但只有一件事是覆盖的，因为它被移到了左边。

我在javascript中添加了一行代码，它在Chrome、火狐和Safari (在Windows上)上都能很好地工作。

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight(),
  left    : $t.position().left // the fix.
});