如何添加一個加載gif到這個彈出框，然後刪除它？

這些確實是基本問題。我厭倦了等待我的網站設計師來解決這個問題。這不是那麼難......我通過閱讀相關問題得到了這些，但我需要幫助完成最後一部分。如何添加一個加載gif到這個彈出框，然後刪除它？

我想在彈出的中心顯示一個加載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>

來源

2016-03-20 MountainX

你想要這樣的東西嗎？ https://jsfiddle.net/yw01oukx/ –

@IsmailFarooq是的，與此類似。但我需要jQuery來添加和刪除它，正如我在問題中提到的那樣。當您顯示彈出窗口時，感謝 – MountainX

？我的意思是你提交表單或其他東西？ –

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

我還沒有測試過這個。希望這可以幫助。

來源

2016-03-20 10:48:11 Mihir

謝謝。但是我遇到的最麻煩的部分是jQuery。查看我的代碼（OP）中的註釋，瞭解我需要幫助的地方。 – MountainX

如何添加一個加載gif到這個彈出框，然後刪除它？

回答

相關問題