SweetAlert的入门

  1 document.getElementById("demo1").onclick = function() {
  2 swal("这是一个信息提示框!")
  3 };
  4 
  5 document.getElementById("demo2").onclick = function() {
  6 swal("这是一个信息提示框!", "很漂亮，不是吗？")
  7 };
  8 
  9 document.getElementById("demo3").onclick = function() {
 10 swal("干得好", "你点击了按钮!", "success")
 11 };
 12 
 13 document.getElementById("demo4").onclick = function() {
 14 swal({
 15 title: "你确定？",
 16 text: "您将无法恢复这个虚构的文件！",
 17 type: "warning",
 18 showCancelButton: true,
 19 confirmButtonColor: "#DD6B55",
 20 confirmButtonText: "是的，删除！",
 21 closeOnConfirm: false
 22 }, function() {
 23 swal("删除!", "您的虚构文件已被删除！", "success")
 24 })
 25 };
 26 
 27 document.getElementById("demo5").onclick = function() {
 28 swal({
 29 title: "你确定？",
 30 text: "您将无法恢复这个虚构的文件！",
 31 type: "warning",
 32 showCancelButton: true,
 33 confirmButtonColor: "#DD6B55",
 34 confirmButtonText: "是的，删除！",
 35 cancelButtonText: "不，取消",
 36 closeOnConfirm: false,
 37 closeOnCancel: false
 38 }, function(isConfirm) {
 39 if (isConfirm) {
 40 swal("删除!", "您的虚构文件已被删除！", "success") 
 41 } else{
 42 swal("取消!", "您的虚构文件是安全的！", "error")
 43 }
 44 })
 45 };
 46 
 47 document.getElementById("demo6").onclick = function() {
 48 swal({
 49 title: "Sweet!",
 50 text: "这里是自定义图像!",
 51 imageUrl: "img/thumbs-up.jpg"
 52 })
 53 };
 54 
 55 document.getElementById("demo7").onclick = function() {
 56 swal({
 57 title: "HTML <small>标题</small>!",
 58 text: "A custom <span style=‘color:pink‘>html<span> message.",
 59 html:　true
 60 })
 61 };
 62 
 63 document.getElementById("demo8").onclick = function() {
 64 swal({
 65 title: "自动关闭警报!",
 66 text: "2秒后自动关闭",
 67 timer: 2000,
 68 showConfirmButton: false
 69 })
 70 };
 71 
 72 document.getElementById("demo9").onclick = function() {
 73 swal({
 74 title: "请输入！",
 75 text: "填写一些信息",
 76 type: "input",
 77 showCancelButton: true,
 78 closeOnConfirm: false,
 79 animation: "slide-from-top",
 80 inputPlaceholder: "请输入..."
 81 }, function(inputValue) {
 82 if (inputValue === false) {
 83 return false;
 84 }
 85 if (inputValue === "") {
 86 swal.showInputError("内容不能为空！");
 87 return false;
 88 }
 89 
 90 swal("Nice!", "你输入的是：" + inputValue, "success")
 91 })
 92 };
 93 
 94 document.getElementById("demo10").onclick = function() {
 95 swal({
 96 title: "AJAX请求实例",
 97 text: "提交运行Ajax请求",
 98 type: "info",
 99 showCancelButton: true,
100 closeOnConfirm: false,
101 showLoaderOnConfirm: true
102 }, function() {
103 setTimeout(function() {
104 swal("AJAX请求完成！");
105 }, 2000)
106 })
107 };