html中使用sweetalert
时间: 2023-11-16 16:07:06 浏览: 43
SweetAlert 是一个美观、高度可定制且易于使用的 JavaScript 弹出窗口库。它可以用于在 HTML 网页中创建弹出窗口,以便向用户显示消息、警告或错误。下面是在 HTML 中使用 SweetAlert 的基本步骤:
1. 在 HTML 中引入 SweetAlert 的 CSS 和 JavaScript 文件:
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
```
2. 使用 SweetAlert 的 JavaScript API 在 HTML 中创建弹出窗口。例如,下面的代码将在点击按钮时弹出一个简单的 SweetAlert 窗口:
```
<button onclick="swal('Hello world!')">点击我</button>
```
3. SweetAlert 还提供了许多自定义选项,以便根据需要创建更复杂的弹出窗口。例如:
```
swal({
title: "您确定要删除此文件吗?",
text: "文件将被永久删除,无法恢复!",
icon: "warning",
buttons: ["取消", "删除"],
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("文件已被删除!", {
icon: "success",
});
} else {
swal("文件未被删除。");
}
});
```
上面的代码将创建一个警告类型的 SweetAlert 窗口,其中包含一个确认和取消按钮。如果用户单击“删除”按钮,将弹出另一个成功类型的 SweetAlert 窗口,否则将弹出一个简单的 SweetAlert 窗口来告诉用户文件未被删除。
希望这可以帮助你使用 SweetAlert 在 HTML 中创建弹出窗口。