SweetAlert用法

一句话介绍

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