JavaScript 原生的 alert 弹窗是向用户展示消息的一种简单有效的方法，但它们不仅缺乏可定制性，而且外观往往不尽如人意。在 JavaScript 中，我们有几种方法可以将原生 alert 弹窗替换为更加美观的提示框，具体如下：
目录
- 使用自定义 HTML 和 CSS
- 使用 SweetAlert 库
- 使用 CSS 框架
使用自定义 HTML 和 CSS
我们可以构建提示框的 HTML 结构（包括标题、消息和按钮），并利用 CSS 进行样式设计，以打造独特的视觉体验。这种方法虽然提供了最大的控制权，但需要投入更多的编码精力。
示例： 下面的代码创建了一个按钮，点击时会显示一个自定义提示框，允许用户查看消息并在需要时关闭提示框。
HTML
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<body style="display: flex; justify-content: center;
align-items: center; height: 100vh; margin: 0;">
Fancy Alert Box
This is a custom alert message.
function showAlert() {
document
.getElementById("myAlert")
.style
.display = "block";
}
function closeAlert() {
document
.getElementById("myAlert")
.style
.display = "none";
}
#myAlert {
display: none;
/ Initially hidden /
position: fixed;
/ Stays in place when scrolling /
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/ Center the box /
background-color: #f1f1f1;
padding: 20px;
border: 1px solid #ddd;
}
`
****输出：****
.gif)Output
## 使用 SweetAlert 库
像 Noty.js 和 [SweetAlert2](https://www.geeksforgeeks.org/reactjs/sweetalert2-advance-version-of-sweetalert/) 这样的库提供了现成的、可编辑的提示框，包含按钮、图标和动画。它们使开发过程变得更加轻松，但同时也引入了外部依赖。
****示例： **** 点击下面的按钮，将会显示一个 SweetAlert2 提示框，其中包含标题、消息、图标和一个“Cool”按钮。
HTML
`
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
<script src=
"https://cdn.jsdelivr.net/npm/sweetalert2@11">
document
.getElementById("myButton")
.addEventListener("click", function() {
Swal.fire({
title: ‘Fancy Alert!‘,
text: ‘This is a message from SweetAlert2‘,
icon: ‘success‘,
confirmButtonText: ‘Cool‘
});
});
`
****输出： ****
.gif)Output
## 使用 CSS 框架
我们可以利用 Materialize 和 [Bootstrap](https://www.geeksforgeeks.org/bootstrap/bootstrap-tutorial/) 等框架来获取预设计的提示框组件的各种样式和功能。它们提供了一种简单快捷的解决方案，但自定义的灵活性可能会受到限制。
****示例：**** 下面的示例使用 [Materialize CSS](https://www.geeksforgeeks.org/css/materialize-css/) 框架实现了一个美观的提示框，以改善用户体验和视觉吸引力。
HTML
`
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
.my-alert {
border-radius: 10px;
/ Rounded corners /
}
body {
display: flex;
justify-content: center;
align-items: cente