jquery - 重叠

Question

<div id="data_div">
    <!-- render content here, might take a while... -->
</div>
<div id="loading_div" style="background-color:cyan" >
    Loading, please wait...
</div>

我希望“loading_div”与“data_div”重叠以创建正在进行加载的效果，而真正发生的是内容已经在后台呈现。当文件准备好后，我可以做类似的事情

$(document).ready(function () {
    $("#loading_div").hide();
}

这如何用 CSS 和/或 JQuery 实现？

Answer 1

对于#loading_div，假设它不在包装器或其他东西中(就您的代码而言，最好在#data_div 中):

#loading_div {
margin: 10%;
width: 80%;
height: 50%;
text-align: center;
opacity: 0.8;
z-index: 99;
background: black;
color: white;
display: block;
position: absolute;
padding-top: 30%;
}

#data_div {
 z-index: 0;   
    text-align: center;
}

修改口味...

http://jsfiddle.net/H2WWx/