在 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 组件。
五、弹窗使用最佳实践
- 避免过度使用：使用原生 alert()，例如调试或临时提示。
- 提供明确的操作：确保用户知道如何关闭或响应弹窗。
- 使用自定义样式：原生弹窗样式固定，自定义模态框可提供更好的用户体验。
- 避免阻塞UI：原生弹窗会阻塞页面操作，考虑使用非阻塞的替代方案。
- 不要隐藏关闭按钮：确保用户随时可以关闭弹窗。
- 不要过度设计：弹窗内容应简洁明了，避免复杂的布局。