Итак, у меня есть таблица данных, и я получаю данные обратно с помощью ajax. Когда данные извлекаются, данные из таблицы исчезают и появляется небольшая небольшая область загрузки. Я предпочел бы, чтобы данные оставались (я знаю, как это сделать), и чтобы кружок загрузки появлялся над таблицей в центре (не обязательно по вертикали, по крайней мере, горизонтально), а также слегка прозрачная блокировка фона (а не остальную часть веб-страницы). Как я могу сделать div над таблицей и сделать это?
Загрузочная панель jquery overlay
Ответ 1
просто используйте метод jQuery .html()
для ввода нового div с кругом загрузки в div, удерживающий таблицу. Затем используйте css для его стилизации. возможно, дать ему фоновое изображение, непрозрачное. и относительно или абсолютно позиционировать нагрузочный круг.
скажем, что у вас есть:
<div id="table_container>
<table>
<tr>
<td>something</td>
<td>something</td>
</tr>
</table>
</div>
при загрузке новых данных:
$('div#table_container').html('<div id="overlay"><img src="path/to/loading/img.png" class="loading_circle" alt="loading" /></div>');
и стиль его что-то вроде:
#overlay {
width: 100%;
background: url('path/to/opaque/img.png') repeat;
position: relative;
}
#overlay img.loading_circle {
position: absolute;
top: 50%; // edit these values to give you
left: 50%; // the positioning you're looking for.
}
Ответ 2
[Посмотрите на действие]
HTML
<div id="overlay">
<img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif"
id="img-load" />
</div>
CSS
#overlay {
display:none;
position:absolute;
background:#fff;
}
#img-load {
position:absolute;
}
Javascript
$t = $("#table"); // CHANGE it to the table id you have
$("#overlay").css({
opacity : 0.5,
top : $t.offset().top,
width : $t.outerWidth(),
height : $t.outerHeight()
});
$("#img-load").css({
top : ($t.height() / 2),
left : ($t.width() / 2)
});
Затем, когда вы загружаете вещи, вы просто говорите:
$("#overlay").fadeIn();
И когда вы закончите:
$("#overlay").fadeOut();
Примечание. Загружаемое изображение выглядит как по вертикали, так и по горизонтали в соответствии с запросом. Кроме того, только таблица будет иметь оверлей не всю страницу по запросу.
Ответ 3
ну, вы можете попробовать использовать позицию css: абсолютный для круга загрузки
Ответ 4
Это сработало для меня, но только одно с наложением, поскольку оно было сдвинуто влево.
Я добавил одну строку в javascript, и она отлично работала на Chrome, Firefox и Safari (в Windows).
$("#overlay").css({
opacity : 0.5,
top : $t.offset().top,
width : $t.outerWidth(),
height : $t.outerHeight(),
left : $t.position().left // the fix.
});