javascript - 在现有 div 上渲染 div

Question

我有这段代码可以模拟我的代码中发生的事情:

Fiddle

<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 (“请稍候”消息)。

如有任何想法，我们将不胜感激!

Answer 1

如果你保持加载覆盖足够简单，它可以用一个简单的 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;