jQuery覆盖加载栏div

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (66)

所以我有一个数据表,我使用Ajax来获取数据。当检索数据时,表中的数据消失,一个小的加载圈出现。我更希望数据保持不变(我知道如何做到这一点),并希望加载圆圈出现在它的中心位置(不一定垂直,至少水平),以及稍微透明的背景,稍微屏蔽了表的视图(而不是网页的其余部分)。我怎样才能使一个div出现在桌面上,然后这样做呢?

提问于
用户回答回答于

只需使用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.
}
用户回答回答于

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

扫码关注云+社区

领取腾讯云代金券