纯CSS和JS打造自定义提示框 - 可控内容和显示时间

<div id='myAlert'></div>
<style>
#myAlert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: none;
}
</style>
<script>
function showAlert(message, timeout) {
  var alertBox = document.getElementById('myAlert');
  alertBox.innerHTML = message;
  alertBox.style.display = 'block';
  setTimeout(function() {
    alertBox.style.display = 'none';
  }, timeout);
}

showAlert('这是一个提示框', 3000); // 显示3秒后自动隐藏
</script>