Рендер 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

Вы хотите добавить в absolutely- или фиксированной позиции элемента:

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

Это можно сделать с помощью простого 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 3

Я пошел для выявления скрытой 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; 
} 

Answer 4

Вы можете просто добавить загружаемый контент рядом с таблицей и установить абсолютную позицию с полным размером и скрытым содержимым. Вам также нужно определить родителя с относительным положением. Затем, когда вы нажимаете кнопку, вы можете отображать его. Лучший способ привязать элемент к файлу 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); 
} 

ЯШ:

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

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