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

Question

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

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

但是我想向人们显示邀请已发送的确认信息。

为此，我认为最好在重新加载后暂时显示一两秒的弹出消息 - “邀请已发送”。然后这会淡出。

我不知道我将如何去做这件事。您是否有任何示例或有关实现此目标的指示？

Answer 1

您可以在 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);