Question

我有这个代码模拟我代码中发生的事情：

<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>

当用户点击该按钮时，会在某处发送请求，当回复时，表格会更新。

与此同时，显示“请等待”消息而不是表格。

我希望“loading”div显示在现有表上而不是替换它。

我认为最好的解决方法是在现有元素（本例中为tableID）中添加一个css类来调暗它，但我不知道如何渲染另一个div（“请等一下“消息”。

任何想法都将不胜感激！

Answer 1

可以使用简单的addClass和：在伪元素之后，如果你保持加载覆盖足够简单：

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;

}

Answer 2

您想要附加绝对或固定位置元素：

.pleaseWait {
    background-image: url("http://www.ajaxload.info/images/exemples/6.gif");
    background-repeat:no-repeat;
    position: absolute;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding-top: 50px;
    background-color: rgba(0,0,0,.5);
    color: white;
}

function show(id) {
    $(id).append('<p class="pleaseWait">Please Wait</p>');
}

<强> Demo

我会把风格清理给你。

Answer 3

您只需在表格旁边添加加载内容，并将其设置为具有完整尺寸内容并隐藏的绝对位置。您还需要定义具有相对位置的父级。然后当你点击按钮让他显示。使用onclick绑定js文件上的元素比使用onclick上的内联更好的方法。

HTML：

<section>
    <table style="width:100%" id="tableID">
...
    </table>
    <button type="button" id="action">Click Me!</button>
    <div class="loading">Please Wait</div>
</section>

的CSS：

section {
    position: relative;
}
.loading{
    display: none;
    color: #FFF;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

JS：

$('#action').on('click', function() {
    $('.loading').show();
});

http://jsfiddle.net/Pik_at/fywk4gLu/

Answer 4

我已经去了一个隐藏div的父div中包含表和加载消息：

DEMO

HTML：

<div class="table-wrap">
<div class="loading"><p class="pleaseWait">Please Wait</p></div>
<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>
</div>
<button type="button" id="clicker">Click Me!</button>

CSS：

.pleaseWait {
    background-image: url("http://www.ajaxload.info/images/exemples/6.gif");
    background-repeat:no-repeat;
    padding-left: 25px;
}

.table-wrap{
    position: relative;   
}

.loading{ 
    display: none; 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: white;
}

在现有div上渲染div

4 个答案: