Question

这些是非常基本的问题。我厌倦了等待我的网站设计师解决这个问题。这不是那么难......我通过阅读相关问题得到了这一点，但我需要帮助完成最后一部分。

我想在弹出窗口的中心显示一个加载gif。

我想使用类似于http://loadinggif.com/images/image-selection/29.gif的gif，但背景与下面显示的消息弹出式CSS（半透明黑色）相匹配。

我希望gif在弹出窗口中居中。

最重要的是，我希望删除加载gif并在慢速函数完成后显示“已完成”的文本消息。

我相信下面的代码已经足够了，但如果没有，我会编辑问题以添加更多信息。

CSS：

.message-pop-up{position: fixed;width: 60%; top: 10%; height: 80%; text-align: center; background: rgba(0,0,0,0.7); color: #fff; z-index: 9999; margin: 0 auto; left: 0; right: 0;display: none;}

jQuery的：

$('.form1').submit(function(event) {
  $('.message-pop-up').show();
  $('.popup-text').html("Just a moment please...");
  //show loading gif (how?)
    // ...do some stuff that takes time...
  //hide loading gif (how?)
  $('.popup-text').html("");
  $('.popup-text').append("Finished!");
});

$('.pop-close').click(function(event) {
  $('.message-pop-up').hide();
});

HTML：

<div class="message-pop-up">
    <p class="pop-close">x</p>
    <p class="popup-text"></p>
</div>

Answer 1

HTML -

<div class="message-pop-up">
    <p class="pop-close">x</p>
    <p class="popup-text"></p>
    <div class="popup-loader-img"></div>
</div>

CSS -

.popup-loader-img{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(' http://loadinggif.com/images/image-selection/29.gif ');
    background-position: 50% 50%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

我没有测试过这个。希望这会有所帮助。

如何在此弹出窗口中添加加载gif，然后将其删除？

1 个答案: