使用用户定义的字符创建警告框

<div id="alertBox" class="alert-box">
  <span id="alertIcon" class="alert-icon">!</span>
  <span id="alertMessage" class="alert-message">这是一个警告框示例。</span>
  <button id="alertButton" class="alert-button">确定</button>
</div>

.alert-box {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  align-items: center;
}

.alert-icon {
  font-size: 20px;
  font-weight: bold;
  color: #721c24;
  margin-right: 10px;
}

.alert-message {
  color: #721c24;
}

.alert-button {
  background-color: #dc3545;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  margin-left: auto;
  cursor: pointer;
}

var alertBox = document.getElementById("alertBox");
var alertButton = document.getElementById("alertButton");

alertButton.addEventListener("click", function() {
  alertBox.style.display = "none";
});

function showAlert(message) {
  var alertMessage = document.getElementById("alertMessage");
  alertMessage.textContent = message;
  alertBox.style.display = "flex";
}