SweetAlert用法
本文共 1071 字，大约阅读时间需要 3 分钟。
一句话介绍
SweetAlert是一个JS插件，能够完美替代JS自带的alert弹出框，并且功能强大，设计优美。
引用
直接在下载CSS和JavaScript文件，解压后找到/dist文件夹，里面有CSS样式文件和JS脚本，在自己文件中引用它们：
然后在需要用到alert()的地方用swal()即可。
Try me按钮，弹出一条警告消息 效果图：sweetalert是在屏幕中央弹出一个模态框
基本用法
最基本的形式：swal()，用法完全同JS自带的alert()，在括号内传入消息即可，如同上面的栗子演示的。
swal()的强大之处在于，它可以接收参数来自定义模态框，看下面的效果： 效果图：
参数介绍
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 | 同上，只是用于取消按钮。 |
示例
下面我们做一个删除文件前的确认效果：警告模态框 + 二次确认
效果图：
如果想了解更多有趣的栗子，请移步官网：
你可能感兴趣的文章
量子物理
查看>>
用Python连接IBM量子API实现的量子算法——Deutsch-Jozsa算法
查看>>
关于TDD的感想
查看>>
马氏距笔记
查看>>
《增长黑客》读书笔记
查看>>
实时计算、离线计算、流式计算、批量计算 之间的关系
查看>>
梯度 方向导数
查看>>
Spring MVC 国际化
查看>>
单元测试的回滚
查看>>
理解Word2Vec
查看>>
TensorFlow中，对于1个batch中有多个样本，迭代一次，具体是如何执行的
查看>>
L1、L2规则化
查看>>
凸集、凸函数、凸优化
查看>>
区别和联系：Hopfield网络、BM（玻尔兹曼机）、退火算法、BP
查看>>
关于Spring Data Jpa的分页、跨表查询
查看>>
CTR预估
查看>>
ROC曲线与AUC值
查看>>
spring事务传播属性和隔离
查看>>
MYSQL Deadlock问题
查看>>
MySQL InnoDB锁
查看>>