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

【问题标题】：How to add a loading gif to this popup, then remove it?如何在此弹出窗口中添加加载 gif，然后将其删除？
【发布时间】：2016-03-20 07:20:12
【问题描述】：

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

我想在弹出窗口的中心显示加载 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>

【问题讨论】：

你想要这样的东西吗？ jsfiddle.net/yw01oukx
@IsmailFarooq 是的，类似。但正如我在问题中提到的那样，我需要 jQuery 来添加和删除它。谢谢
何时显示弹出窗口？我的意思是你是在提交表格还是别的什么？
是的，如我的jQuery代码所示，弹出是响应form1.submit。
当用户单击表单 btn 时查看此链接显示弹出窗口，然后在提交表单后隐藏，如 $('#form').on('submit',function(e){ e.preventDefault( ); // 你的代码 });看这里stackoverflow.com/questions/30888761/…

标签： jquery css loading animated-gif

【解决方案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;
}

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

【讨论】：

谢谢。但我最麻烦的部分是 jQuery。请参阅我的代码（在 OP 中）中的 cmets，了解我需要帮助的地方。