好看的alert弹窗美化代码

以下是一些美化alert弹窗的CSS代码：

/* Alert弹窗样式 */
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  border-radius: 5px;
}

/* 成功 Alert弹窗样式 */
.alert.success {background-color: #4CAF50;}

/* 信息 Alert弹窗样式 */
.alert.info {background-color: #2196F3;}

/* 警告 Alert弹窗样式 */
.alert.warning {background-color: #ff9800;}

/* 关闭按钮样式 */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* 鼠标悬停关闭按钮样式 */
.closebtn:hover {
  color: black;
}

以下是一个基于JavaScript的alert弹窗美化示例：

function showAlert(message, type) {
  // 创建一个alert元素
  var alertElement = document.createElement("div");
  
  // 添加样式类
  alertElement.classList.add("alert");
  if (type == "success") {
    alertElement.classList.add("success");
  } else if (type == "info") {
    alertElement.classList.add("info");
  } else if (type == "warning") {
    alertElement.classList.add("warning");
  }
  
  // 添加关闭按钮
  var closeBtn = document.createElement("span");
  closeBtn.classList.add("closebtn");
  closeBtn.innerHTML = "×";
  alertElement.appendChild(closeBtn);
  
  // 添加消息
  var messageElement = document.createElement("p");
  messageElement.innerHTML = message;
  alertElement.appendChild(messageElement);
  
  // 将alert元素添加到body中
  document.body.appendChild(alertElement);
  
  // 点击关闭按钮时，删除alert元素
  closeBtn.onclick = function() {
    alertElement.remove();
  }
  
  // 5秒后自动删除alert元素
  setTimeout(function() {
    alertElement.remove();
  }, 5000);
}

这个函数接收两个参数：消息内容和消息类型（可选）。根据消息类型不同，alert弹窗的样式会有所不同。调用这个函数时，会创建一个alert元素，并添加到页面中。5秒后，这个alert元素会自动删除。用户也可以手动点击关闭按钮来删除这个alert元素。