Как разместить изображение GIF ожидания / загрузки поверх Div? - PullRequest
Новая
       1

Как разместить изображение GIF ожидания / загрузки поверх Div?

1 голос
/ 09 марта 2012

Мне нужно поместить wait.gif, завернутый в div, поверх другого div на определенный период времени.

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

  1. Как мне расположить ожидающее изображение поверх div.

  2. MysetTimeout не работает.

Вот мой код: 

<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 находится на обслуживании, поэтому я вставил все свои коды.

Ответы [ 5 ]

1 голос
/ 09 марта 2012

Только что добавил мой плагин jQuery elementOverlay в github.Это еще не задокументировано и на 100% проверено, но должно работать.

Следующий код поместит наложение поверх формы до завершения публикации ajax: 

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

1 голос
/ 09 марта 2012

  • Дайте div1 position:relative свойство

  • Дайте подождать свойство display:none вместо того, чтобы скрывать его JQuery

  • Даешь в ожидании position:absolute собственность

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

$('#btnLoad').click(function() {
   $(this).append($('#waiting').css({top:10, left:10});
});
1 голос
/ 09 марта 2012

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

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

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

1 голос
/ 09 марта 2012

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

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

setTimeout(function(){$("#div1").css('background-color', '#FDF5E6');}, 5000);
1 голос
/ 09 марта 2012

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...