jquery - 如何向此弹出窗口添加加载 gif，然后将其删除？

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;
}

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