好看的alter

最新推荐文章于 2024-07-11 17:37:13 发布

qq_45591372

最新推荐文章于 2024-07-11 17:37:13 发布

阅读量40

点赞数

文章标签：前端 javascript html

原文链接：https://blog.csdn.net/Yanghongru/article/details/105731360

版权

1.介绍
sweetalert是啥?
sweetalert是一个前端插件,可以提供好看的弹出框

2.使用
1. 在将要使用sweetalert的html文件中先导入sweetalert,
①使用cdn:

2. 进入官网,选择喜欢的弹出框
https://sweetalert.js.org/guides/#getting-started

3. 将选择的弹出框代码复制到我们的html代码中,根据自己的需要也可以进行更改,eg:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
</head>
<body>
<div>
<p>alex</p>
<button id="btn">删除</button>
</div>
<script>
$("#btn").click(function () {
swal({
title: "你确定吗?",
text: "一旦删除,不可恢复",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
$(this).parent().remove()
swal("成功删除", {
icon: "success",
});
} else {
swal("取消删除");
}
});
})
</script>
</body>
</html>