js 重写alert 插件

JavaScript 中的 alert 函数是一个内置的全局函数，用于显示一个带有消息的模态对话框。然而，alert 的样式和行为在不同的浏览器中可能有所不同，且它阻塞了页面的其他交互，因此在现代 web 开发中，开发者常常寻找替代方案来提供更好的用户体验。

基础概念

重写 alert 插件通常意味着创建一个自定义的弹窗组件，它可以提供更灵活的样式和更好的用户体验。这样的插件通常会使用 HTML、CSS 和 JavaScript 来实现，并且可以很容易地集成到现有的项目中。

类型

模态对话框：阻止用户与页面的其他部分交互，直到对话框关闭。
非模态对话框：允许用户在对话框打开的同时与页面的其他部分交互。

应用场景

表单验证：在用户提交表单前显示错误信息。
通知和提示：向用户显示重要信息或操作结果。
警告和确认：在执行关键操作前获取用户的确认。

示例代码

以下是一个简单的自定义 alert 插件的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Alert</title>
<style>
  .custom-alert {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
</style>
</head>
<body>

<div class="overlay" id="overlay"></div>
<div class="custom-alert" id="customAlert">
  <p id="alertMessage"></p>
  <button onclick="closeAlert()">OK</button>
</div>

<script>
function showAlert(message) {
  document.getElementById('alertMessage').textContent = message;
  document.getElementById('customAlert').style.display = 'block';
  document.getElementById('overlay').style.display = 'block';
}

function closeAlert() {
  document.getElementById('customAlert').style.display = 'none';
  document.getElementById('overlay').style.display = 'none';
}

// 使用自定义的 alert
showAlert('这是一个自定义的警告框！');
</script>

</body>
</html>