如何实现HTML提示消息在数秒后自动消失？

你当前的提示是服务端渲染的静态HTML元素，可通过原生JavaScript的定时器功能实现自动隐藏，无需引入额外依赖：

步骤1：给提示元素增加唯一标识 #

修改你的PHP代码，给提示h4标签添加专属ID方便JS选中：

$msg = '<h4 id="flash-msg" class="col-12 text-center mb-3 text-success">Sikeres rögzítés!</h4>';

步骤2：添加自动隐藏的JS逻辑 #

在页面</body>结束标签之前插入以下代码，可自定义延迟隐藏的时长（示例为3秒后隐藏）：

document.addEventListener('DOMContentLoaded', function() {
  const flashMsg = document.getElementById('flash-msg');
  // 仅当页面存在提示元素时执行逻辑
  if (flashMsg) {
    setTimeout(function() {
      // 无动画直接隐藏
      flashMsg.style.display = 'none';
    }, 3000); // 3000毫秒=3秒，可自行调整时长
  }
});

可选：添加淡出过渡效果 #

如果想要更平滑的隐藏体验，可增加CSS过渡属性：

1. 修改提示标签的样式，添加过渡规则：

$msg = '<h4 id="flash-msg" class="col-12 text-center mb-3 text-success" style="transition: opacity 0.3s ease;">Sikeres rögzítés!</h4>';

2. 替换JS里的隐藏逻辑：

setTimeout(function() {
  // 先改透明度实现淡出
  flashMsg.style.opacity = '0';
  // 过渡动画完成后再彻底隐藏元素
  setTimeout(function() {
    flashMsg.style.display = 'none';
  }, 300);
}, 3000);

如果你的提示消息是AJAX发送POST请求后动态插入到页面的，不需要监听DOMContentLoaded事件，直接在插入提示元素的逻辑后追加定时器代码即可。

内容的提问来源于stack exchange，提问作者Tóth László