一句话介绍
SweetAlert是一个JS插件,能够完美替代JS自带的alert弹出框,并且功能强大,设计优美。
引用
直接在官网下载CSS和JavaScript文件,解压后找到/dist
文件夹,里面有CSS样式文件和JS脚本,在自己文件中引用它们:
<!-- 引用sweetalert css 和 js -->
<script src="sweetalert-master/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert-master/dist/sweetalert.css">
然后在需要用到alert()
的地方用swal()
即可。
先看一个最基本的效果:
点击Try me
按钮,弹出一条警告消息
<button>Try me</button>
<script>
var ele = document.getElementsByTagName("button")[0];
ele.onclick = function () {
swal("这是一条alert消息");
}
</script>
效果图:sweetalert是在屏幕中央弹出一个模态框
基本用法
最基本的形式:swal()
,用法完全同JS自带的alert()
,在括号内传入消息即可,如同上面的栗子演示的。
但是swal()
的强大之处在于,它可以接收参数来自定义模态框,看下面的效果:
<button>Try me</button>
<script>
var ele = document.getElementsByTagName("button")[0];
ele.onclick = function () {
swal({
title: "标题",
text: "这里是自定义文本",
type: "success"
});
}
</script>
效果图:
参数介绍
swal()
以键值对的形式接收关键字参数,下面介绍一些常用的:
参数 | 描述 |
---|---|
title | 模态框的标题 |
text | 模态框的文本描述 |
type | 模态框的类型。sweetalert内建了4中基本的模态框样式,分别是:warning,error,success,和info,每一种对应不同的按钮和动画效果。另外,你也可以设置为input,来显示一个文本输入框。 |
showCancelButton | 如果设为true, 可以显示‘取消’按钮,用以点击关闭模态框 |
showConfirmButton | 显示‘确认’按钮,默认不需要设置。如果设为false, 将不显示‘确认’按钮。如果你执意这么做,请确认你设置了timer(定时器)或者设置allowOutsideClick(允许点击外部区域关闭)参数为true,以免对用户造成困扰。 |
timer | 模态框关闭定时器,单位是毫秒,例如,设为1000就是1秒后自动关闭模态框 |
allowEscapeKey | 如果设为true, 用户可以通过键盘上的ESC关闭模态框 |
confirmButtonText | 自定义确认按钮的显示文本。 |
confirmButtonColor | 自定义确认按钮颜色,必须是16进制的格式 |
cancelButtonText | 自定义取消按钮的显示文本 |
closeOnConfirm | 如果设置为false,那么,点击了确认按钮后,模态框不会关闭。当我们需要二次确认的操作时,这一点会很有用。下面的例子会演示这一点。 |
closeOnCancel | 同上,只是用于取消按钮。 |
示例
下面我们做一个删除文件前的确认效果:警告模态框 + 二次确认
<button>Try me</button>
<script>
var ele = document.getElementsByTagName("button")[0];
ele.onclick = function () {
swal({
title: "你确定?",
text: "文件将被永久删除,此操作不可恢复!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "是的,删除!",
cancelButtonText: "容我三思",
closeOnConfirm: false
// 设置closeOnConfirm: false,下面二次确认按钮被点击后才会关闭模态框
},
function () {
swal({
title: "删除!",
text: "你的文件已被删除",
type: "success"
})
});
}
</script>
效果图:
如果想了解更多有趣的栗子,请移步官网: SweetAlert