基于URL查询字符串的弹出消息和淡入淡出消息-CSS / JS

Question

我有一个referral form on this page，我希望人们多次使用。

提交表单后，它会使用查询字符串?referralsent=true重新加载页面，以便能够通过表单引荐更多人。

不过，我想向人们表明邀请已发送。

为此，我认为最好是在重新加载后暂时显示一秒钟或两秒的弹出消息-“已发送邀请” 。然后它将消失。

我不知道该怎么做。您是否有任何示例或有关实现此目标的指导？

Answer 1

您可以将Timeout与Javascript一起使用：

您的HTML：

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

您的CSS：

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

.hide {
   display: none;
}

您的JS：

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