如何使用JavaScript实现Alert弹窗?

boyanx3个月前 (09-17)技术教程11

在 JavaScript 语言中，有两种方式可以实现 Alert 弹窗，一种为使用浏览器内置的原生 alert() 函数，另外也可通过自定义 DOM 元素和 CSS 实现自定义弹窗。下文为您详细介绍这两种方式：

一、原生alert()方法

此方法为JavaScript 内置的最简单方式，直接调用 alert() 函数即可。

示例代码：

alert('这是一个原生 Alert 弹窗！');

特点：

简单易用：无需额外代码，直接调用。
阻塞页面：弹窗显示时，用户无法操作页面其他元素，直到点击「确定」关闭。
样式固定：样式由浏览器决定，不支持自定义。

二、自定义 Alert 弹窗

通过创建 DOM 元素、添加 CSS 样式和 JavaScript 交互逻辑，可以实现完全自定义的 Alert 弹窗。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 自定义弹窗样式 */
    .custom-alert {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .alert-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      max-width: 400px;
      width: 90%;
      text-align: center;
    }

    .alert-message {
      margin-bottom: 20px;
      font-size: 16px;
    }

    .alert-button {
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .alert-button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>

<button onclick="showCustomAlert('这是一个自定义 Alert 弹窗！')">
  显示自定义弹窗
</button>

<script>
  // 自定义 Alert 函数
  function showCustomAlert(message) {
    // 创建遮罩层
    const overlay = document.createElement('div');
    overlay.className = 'custom-alert';
    
    // 创建弹窗内容
    const content = document.createElement('div');
    content.className = 'alert-content';
    
    // 添加消息
    const messageElement = document.createElement('div');
    messageElement.className = 'alert-message';
    messageElement.textContent = message;
    
    // 添加确认按钮
    const button = document.createElement('button');
    button.className = 'alert-button';
    button.textContent = '确定';
    button.onclick = function() {
      document.body.removeChild(overlay); // 点击后移除弹窗
    };
    
    // 组装元素
    content.appendChild(messageElement);
    content.appendChild(button);
    overlay.appendChild(content);
    
    // 添加到页面
    document.body.appendChild(overlay);
  }
</script>

</body>
</html>

特点：

完全自定义：可以自由设计样式、动画和交互效果。
非阻塞页面：用户可以同时操作页面其他元素（如需阻塞，可添加相应逻辑）。
更灵活的功能：例如支持多按钮、自定义图标等。

三、两种方式的对比

特性	原生 Alert	自定义 Alert
样式控制	无法自定义	完全自定义
页面阻塞	是	否（可通过 CSS 控制）
功能扩展性	仅显示文本和确认按钮	支持多按钮、图标、HTML 内容
兼容性	所有浏览器都支持	需要确保 CSS/JS 兼容性

四、实际应用建议

简单提示：使用原生 alert()，例如调试或临时提示。
复杂交互：使用自定义弹窗，例如需要定制样式、添加取消按钮或表单。
框架 / 库：如果项目中使用了 React、Vue 等框架，可考虑使用对应的 UI 组件库（如 Ant Design、Element UI）提供的 Modal 组件。