jquery覆盖加载条div

因此，我有一个数据表，我正在使用ajax获取数据。检索数据时，表中的数据将消失，并出现一个小的加载循环。我更喜欢数据保持不变（我知道怎么做），加载圆圈出现在表格的中心（不一定是垂直的，至少是水平的），加上略微透明的背景，稍微挡住表格的视图（而不是网页的其余部分）。如何使一个div出现在表上方并执行此操作？

好吧，您可以尝试为加载循环使用css position:absolute

只需使用jQuery的

.html（）

方法将带有加载循环的新div注入到持有表的div中。然后使用css来设置样式。也许给它一个不透明的背景图像。并相对或绝对定位加载循环

假设你有：

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

[] HTML

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

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();

---

注意：加载图像将根据要求垂直和水平居中显示。此外，只有表格才会有覆盖层，而不是要求的整个页面。

这对我来说很有效，但只有一件事是覆盖层向左移动

我在javascript中添加了一行代码，它在Chrome、Firefox和Safari（在Windows上）上运行得非常好

---

这对我不管用。它没有封装我所涉及的全部元素（一个div），并在IE、Firefox、Chrome等中产生了截然不同的结果。这看起来是一个很好的方法，真是太可惜了$css（{top:（$t.height（）/2）-16），左：（$t.width（）/2）-16}）；其中16是大小的1/2（高度=宽度，因为gif图像是正方形），这太棒了！谢谢干净的溶液。谢谢分享！非常简单的解决方案。通过在

body

标记的末尾添加

#overlay

div，您可以更全面地使用此选项。然后添加以下

左：$t.offset（）.left

到

$（“#overlay”）.css（）

，最后添加一个合理的

z索引到
#overlay
。
$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();

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