jQuery jquery覆盖加载条div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3214404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery overlay loading bar div
提问by Matthew
So I have a table of data, and I'm getting data back using ajax. When data is being retrieved, the data from the table disappears and a small little loading circle appears. I'd prefer for the data to stay (I know how to do that) and for the loading circle to appear over the table in the center of it (not necessarily vertically, just at least horizontally), along with a slightly transparent background blocking out the view of the table a little (not the rest of the webpage). How can I make a div appear over the table and do that?
所以我有一个数据表，我正在使用ajax取回数据。检索数据时，表中的数据消失，出现一个小的加载圆圈。我更希望数据保持不变（我知道怎么做）并且加载圆圈出现在它中心的桌子上（不一定是垂直的，至少是水平的），以及稍微透明的背景阻挡将表格的视图移出一点（不是网页的其余部分）。我怎样才能让一个 div 出现在桌子上并做到这一点？
采纳答案by jordanstephens
just use jQuery's .html()method to inject the new div with loading circle into the div holding the table. Then use css to style it. maybe give it a background image that is opaque. and relatively or absolutely position the loading circle.
只需使用 jQuery 的.html()方法将带有加载圆的新 div 注入持有表格的 div 中。然后使用 css 对其进行样式设置。也许给它一个不透明的背景图像。并相对或绝对定位加载圈。
say you have:
说你有：
<div id="table_container>
<table>
<tr>
<td>something</td>
<td>something</td>
</tr>
</table>
</div>
when loading the new data use:
加载新数据时使用：
$('div#table_container').html('<div id="overlay"><img src="path/to/loading/img.png" class="loading_circle" alt="loading" /></div>');
and style it something like:
并将其样式设置为：
#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.
}
回答by gblazex
[See it in action]
[看到它在行动]
HTML
HTML
<div id="overlay">
<img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif"
id="img-load" />
</div>
CSS
CSS
#overlay {
display:none;
position:absolute;
background:#fff;
}
#img-load {
position:absolute;
}
Javascript
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)
});
Then when you're loading things you just say:
然后当你加载东西时，你只需说：
$("#overlay").fadeIn();
And when you're finished:
当你完成时：
$("#overlay").fadeOut();
Note:the loading image appears centered both vertically and horizontally as requested. Also, only the table will have the overlay not the whole page as requested.
注意：加载图像按要求在垂直和水平方向上居中显示。此外，只有表格才会有覆盖层，而不是按要求覆盖整个页面。
回答by John N
This worked for me, but only one thing with the overlay as it was shifted to the left.
这对我有用，但是覆盖层向左移动时只有一件事。
I added one line to the javascriptand it worked perfectly on Chrome, Firefox and Safari (on Windows).
我在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.
});
回答by Puaka
well, you can try using css position:absolute for the loading circle
好吧，您可以尝试使用 css position:absolute 作为加载圈
