These simple inquiries are starting to get on my nerves. I can't keep waiting around for my website designer to resolve this issue. It shouldn't be that difficult... I managed to figure out most of it by researching similar questions, but I could really use some assistance with the final step.
I would like to showcase a loading gif right in the middle of the pop-up window.
I'm aiming to utilize a gif that resembles , but with a backdrop that matches the message-pop-up CSS format displayed below (partially transparent black).
The gif should be perfectly centered within the pop-up.
Most importantly, once the slow function is complete, I want to eradicate the loading gif and replace it with a "finished" text notification.
I believe the provided code should suffice, but if there are any gaps, I will update the question with additional details.
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...");
//display loading gif (how?)
// ...perform time-consuming tasks...
//remove 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>