jquery - Как разместить изображение gif для загрузки/загрузки поверх div?

Мне нужно положить wait.gif, завернутый в div поверх другого div на время.jquery - Как разместить изображение gif для загрузки/загрузки поверх div?

У меня 2 проблемы:

Как я собираюсь поместить изображение ожидания в верхней части дел.
My setTimeout не работает.

Вот мой код:

<html> 
<head> 
<style type="text/css"> 
html, body { 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
} 

#div1 { 
margin-left: 10px; 
margin-top: 10px; 
background-color: #F0F0F0; 
width: 300px; 
height: 300px; 
} 

#btnLoad { 
margin-left: 10px; 
margin-top: 10px; 
} 
</style> 
<script type="text/javascript" src="jquery1.6.4min.js"> </script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#waiting").hide(); 
}); 

$(function() { 
function goFoo() { 
    var width = $("#div1").outerWidth(); 
    var height = $("#div1").outerHeight(); 

    $("#waiting").css({ 
    postion: "absolute", 
    top: height + 10 + "px", 
    left: width + 10 + "px" 
    }).show(); 
    $("#div1").html($("#waiting")); 
    setTimeout(goFoo, 5000); 
} 

$("#btnLoad").click(function() { 
    goFoo(); 
    $("#div1").css('background-color', '#FDF5E6'); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="div1"> </div> 
<div id="waiting" ><img src="wait.gif" /> </div> 
<input type="button" id="btnLoad" value="Click" /> 
</body> 
</html>

Примечание: www.jsfiddle.net под техническое обслуживание Вот почему я наклеенными все мои коды.

источник

2012-03-09 NinjaBoy

Что вы имеете в виду на вершине?Вы хотите выровнять изображение? – Fabian

Я хочу, чтобы изображение было в центре div. Я хочу заставить его работать, как когда вы ждете перезагрузки таблицы. – NinjaBoy

Тайм-аут должен иметь функцию внутри, иначе он будет выполнен сразу. setTimeout (функция() {xxxx}, 5000);

Если вы хотите разместить над div1, используйте свойство z-index css.

источник

2012-03-09 08:46:09 Bjarne77

Попробуйте следующее SetTimeout

setTimeout(function() {$("#div1").css('background-color', '#FDF5E6')}, 5000);

SetTimeout ожидает функцию, а не выполняется функцию. См. https://developer.mozilla.org/en/DOM/window.setTimeout для получения дополнительной информации.

источник

2012-03-09 08:46:59

Я обновил свой вопрос. – NinjaBoy

В текущем примере goFoo никогда не запускается ... В любом случае, дайте людям +1, если они вам помогут, и не изменяйте свой вопрос, это просто расстраивает усилия, которые все вложили :-) –

Чтобы разместить изображение над другим элементом, вы можете использовать position:absolute; и z-index. См.: http://www.w3schools.com/css/css_positioning.asp для получения дополнительной информации.

Ваш setTimeout не работает, как он ожидает, что функция, как:

setTimeout(function(){$("#div1").css('background-color', '#FDF5E6');}, 5000);

источник

2012-03-09 08:47:02 m90

Я обновил мой вопрос. – NinjaBoy

Родительский элемент 'position: absolute;' element по-прежнему нуждается в позиции: relative; ' – m90

Дают Div1 в position:relative свойство
Give подождав display:none свойство вместо того, чтобы скрыть это с JQuery
Ожидание a position:absolute propertyt у

Тогда событие кнопки нагрузки:

$('#btnLoad').click(function() { 
    $(this).append($('#waiting').css({top:10, left:10}); 
});

источник

2012-03-09 08:49:16

Просто добавил мой JQuery плагин elementOverlay на GitHub. Он не документирован и еще 100% проверен, но должен работать.

После код будет положить накладку над формой до тех пор, Аякса пост не закончил:

var overlay = $('#yourForm').elementOverlay({title: '<img src="wait.gif" />'}); 
$.post('/some/action', $('#yourForm').serialize(), function(data) { 
    overlay.elementOverlay('hide'); 

    // handle response 
});

Он использует jQueryUI стилизовать накладку.

https://github.com/jgauffin/griffin.jquery.tools/blob/master/Source/Plugins/jquery.griffin.elementoverlay.js

источник

2012-03-09 08:53:08 jgauffin

jquery - Как разместить изображение gif для загрузки/загрузки поверх div?

ответ

Смежные вопросы