I have this code which simulates what is going on in my code:

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>

When a user clicks the button, a request is sent off somewhere and when the reply es back, the table is updated.

In the meantime, a "Please Wait" message is displayed instead of the table.

I would like the "loading" div to appear over the existing table instead of replacing it.

I thought the best way to go about this would be to add a css class to the existing element (tableID in this case) to dim it but I'm not sure how to render another div (the "Please Wait" message) over it.

Any ideas would be appreciated!

I have this code which simulates what is going on in my code:

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>

When a user clicks the button, a request is sent off somewhere and when the reply es back, the table is updated.

In the meantime, a "Please Wait" message is displayed instead of the table.

I would like the "loading" div to appear over the existing table instead of replacing it.

I thought the best way to go about this would be to add a css class to the existing element (tableID in this case) to dim it but I'm not sure how to render another div (the "Please Wait" message) over it.

Any ideas would be appreciated!

• javascript
• jquery
• html
• css

• 1 You could just use a div that's hidden by default and positioned over the top upon adding the loading class – Gerico Commented Feb 20, 2015 at 15:25

4 Answers 4

It can be done with a simple addClass and :after pseudo elements if you keep the loading overlay simple enough:

http://jsfiddle/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;

}

You'll want to append an absolutely- or fixed-position element:

.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

I'll leave the style cleanup to you.

You can simply add the loading content next to your table and set him absolute position with full size content and hidden. You need to define parent with relative position too. Then when you click on button make him display. Better way to bind element on js file than inline on markup with 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/Pik_at/fywk4gLu/

I've gone for the revealing of a hidden div within a parent div that wraps the table and the loading message:

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