jquery覆盖加载条div

所以我有一个数据表，我正在使用ajax获取数据。 检索数据时，表格中的数据消失，出现一个小的加载圆圈。 我更喜欢保留数据（我知道该怎么做）以及加载圆圈出现在它的中心的桌子上（不一定是垂直的，至少是水平的），还有一个稍微透明的背景阻挡稍微看一下桌子的视图（不是网页的其余部分）。 如何在桌面上显示div并执行此操作？

Answer 1

只需使用jQuery的.html()方法将带有加载圈的新div注入到持有表的div中。 然后使用CSS来设置它的样式。 也许给它一个不透明的背景图像。 相对或绝对地定位加载圆。

说你有：

 
'); 

并设计风格如下：

 #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

[ 看到它在行动 ]

HTML

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，Firefox和Safari（在Windows上）上运行得很好。

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

Answer 4

好吧，你可以尝试使用css position：absolute作为加载圈