我有这段代码可以模拟我的代码中发生的事情:
<table style="width:100%" id="tableID">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<button type="button" onclick="show('#tableID')">Click Me!</button>
<script type="text/javascript">
function show(id) {
$(id).html('<p class="pleaseWait">Please Wait</p>');
}
</script>
当用户点击按钮时,请求会在某处发送,当回复返回时,表格会更新。
与此同时,显示“请稍候”消息而不是表格。
我希望“正在加载”div 出现在现有表格上而不是替换它。
我认为解决此问题的最佳方法是将 css 类添加到现有元素(在本例中为 tableID
)以使其变暗,但我不确定如何呈现另一个 div (“请稍候”消息)。
如有任何想法,我们将不胜感激!
最佳答案
如果你保持加载覆盖足够简单,它可以用一个简单的 addClass 和 :after 伪元素来完成:
http://jsfiddle.net/xrLLaqs6/3/
JS
function show(id) {
$(id).addClass("loading");
}
CSS
.pleaseWait {
background-image: url("http://www.ajaxload.info/images/exemples/6.gif");
background-repeat:no-repeat;
padding-left: 25px;
}
#tableID {
position: relative;
}
#tableID.loading:after{
content:"Please Wait";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
background: red;
opacity: .8;
关于javascript - 在现有 div 上渲染 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28632408/