js实现alert

使用 JavaScript 实现 alert 弹窗

JavaScript 的 alert 方法用于在浏览器中显示一个简单的弹窗，包含指定的消息和一个“确定”按钮。以下是实现方法和注意事项：

基本语法

alert("这里是提示消息");

示例代码

// 直接调用 alert
alert("Hello, World!");

// 结合事件触发
document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
});

自定义弹窗替代方案

如果希望实现更灵活的弹窗（如自定义样式或按钮），可以通过 HTML 和 CSS 结合 JavaScript 模拟：

HTML 结构

<div id="customAlert" style="display: none;">
    <div class="alert-content">
        <p id="alertMessage"></p>
        <button onclick="closeAlert()">确定</button>
    </div>
</div>

CSS 样式

#customAlert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.alert-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
}

JavaScript 逻辑

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

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

注意事项

• alert 会阻塞浏览器线程，直到用户点击“确定”。
• 现代前端框架（如 React、Vue）通常使用组件库（如 Ant Design、Element UI）提供的弹窗组件。
• 对于异步操作，建议使用 Promise 或回调函数处理用户响应。

高级替代方案

使用第三方库实现更丰富的弹窗：

1. SweetAlert2
   安装：npm install sweetalert2
   示例：

   Swal.fire("Hello, World!");

2. Toastr（轻量级通知）
   示例：

   toastr.success("操作成功");