Popup and fade message based on URL query string - CSS/JS

Question

I have a referral form on this page which I want people to use multiple times.

Upon submitting the form it reloads the page with the query string ?referralsent=true in order to be able to refer more people through the form.

However I'd want to show a confirmation to people that the invitation has been sent.

For this I thought it would be best if I temporarily display a popup message for a second or 2 after the reload - "Invitation sent" . This would then fade out.

I have no clue though how I would go about doing this. Do you have any examples maybe or on pointers on making this happen?

Answer 1

You could use Timeout with Javascript:

Your HTML:

<div class="message hide" id="messageUser">
   <!-- Information User -->
</div>

Your CSS :

.message {
  display : block;
  border: 2px solid #ccc;
  padding 20px;
}

.hide {
   display: none;
}

Your JS :

setTimeout(function(){
 document.getElementById('messageUser').classList.remove('hide');
}, 2000);