SweetAlert的入门

在做后台管理系统，在用户交互这块（弹窗、提示相关），用了一款还不错的插件SweetAlert(一款原生js提示框,允许自定义，支持设置提示框标题、提示类型、确认取消按钮文本、点击后回调函数等等), 效果挺好的，简单写一下用法。
把大象装冰箱，总共分三步:

第一步：下载（引用）
有三种方式可供选择：
1.通过bower安装：

$ bower install sweetalert

2.通过npm安装

$ npm install sweetalert

3.我用的是最简单粗暴的方式3：

下载sweetAlert的CSS和JavaScript文件。地址点我
从github上拿下来的sweetalert-master是有带例子的，我们只需要其中两个文件：
dist下的sweetalert.min.js和sweetalert.css（下面引用路径是我自己的）。

<script src="js/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/sweetalert.css"/>

第二步： 需要在页面加载完成后调用sweetalert函数：
swal({
title: "OK!",
text: "Nice to meet you!",
type: "success",
confirmButtonText: "HaHa"
})

第三步，就是写需要实现的具体功能了。下面，我来举几个栗子（代码直接从编辑器拿过来，模态框的图懒得贴了，效果可以自己试试。）：
html代码：
基本信息：<button id="demo1">试一试</button> <br />

带有文字的标题：<button id="demo2">试一试</button> <br />

成功提示：<button id="demo3">试一试</button> <br />

带有“确认”按钮的功能的警告消息：<button id="demo4">试一试</button> <br />

通过传递参数，您可以执行一些其他的事情比如“取消”。：<button id="demo5">试一试</button> <br />

一个有自定义图标的消息：<button id="demo6">试一试</button> <br />

自定义HTML信息：<button id="demo7">试一试</button> <br />

自动关闭模态框：<button id="demo8">试一试</button> <br />

更换“提示”功能: <button id="demo9">试一试</button> <br />

使用加载程序（例如，用于AJAX请求）: <button id="demo10">试一试</button> <br />

js代码(原谅我可耻的用了原生)：

 document.getElementById("demo1").onclick = function() {
 swal("这是一个信息提示框!")
 };

 document.getElementById("demo2").onclick = function() {
 swal("这是一个信息提示框!", "很漂亮，不是吗？")
 };

 document.getElementById("demo3").onclick = function() {
 swal("干得好", "你点击了按钮!", "success")
 };

 document.getElementById("demo4").onclick = function() {
 swal({
 title: "你确定？",
 text: "您将无法恢复这个虚构的文件！",
 type: "warning",
 showCancelButton: true,
 confirmButtonColor: "#DD6B55",
 confirmButtonText: "是的，删除！",
 closeOnConfirm: false
 }, function() {
 swal("删除!", "您的虚构文件已被删除！", "success")
 })
 };

 document.getElementById("demo5").onclick = function() {
 swal({
 title: "你确定？",
 text: "您将无法恢复这个虚构的文件！",
 type: "warning",
 showCancelButton: true,
 confirmButtonColor: "#DD6B55",
 confirmButtonText: "是的，删除！",
 cancelButtonText: "不，取消",
 closeOnConfirm: false,
 closeOnCancel: false
 }, function(isConfirm) {
 if (isConfirm) {
 swal("删除!", "您的虚构文件已被删除！", "success")
 } else{
 swal("取消!", "您的虚构文件是安全的！", "error")
 }
 })
 };

 document.getElementById("demo6").onclick = function() {
 swal({
 title: "Sweet!",
 text: "这里是自定义图像!",
 imageUrl: "img/thumbs-up.jpg"
 })
 };

 document.getElementById("demo7").onclick = function() {
 swal({
 title: "HTML <small>标题</small>!",
 text: "A custom <span style='color:pink'>html<span> message.",
 html:　true
 })
 };

 document.getElementById("demo8").onclick = function() {
 swal({
 title: "自动关闭警报!",
 text: "2秒后自动关闭",
 timer: 2000,
 showConfirmButton: false
 })
 };

 document.getElementById("demo9").onclick = function() {
 swal({
 title: "请输入！",
 text: "填写一些信息",
 type: "input",
 showCancelButton: true,
 closeOnConfirm: false,
 animation: "slide-from-top",
 inputPlaceholder: "请输入..."
 }, function(inputValue) {
 if (inputValue === false) {
 return false;
 }
 if (inputValue === "") {
 swal.showInputError("内容不能为空！");
 return false;
 }

 swal("Nice!", "你输入的是：" + inputValue, "success")
 })
 };

 document.getElementById("demo10").onclick = function() {
 swal({
 title: "AJAX请求实例",
 text: "提交运行Ajax请求",
 type: "info",
 showCancelButton: true,
 closeOnConfirm: false,
 showLoaderOnConfirm: true
 }, function() {
 setTimeout(function() {
 swal("AJAX请求完成！");
 }, 2000)
 })
 };

下面说一些可能会频繁使用的配置项：

好啦，就这样吧。其实sweetalert2也已经出了，支持响应式，功能也更加强大，但本着够用就好的原则，还是先用的第一版。

参考：
源地址：http://t4t5.github.io/sweetalert/

中文：http://mishengqiang.com/sweetalert/

github地址：https://github.com/t4t5/sweetalert