1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"> 7 <style type="text/css"> 8 button, .button { 9 background-color: #AEDEF4; 10 color: white; 11 border: none; 12 box-shadow: none; 13 font-size: 17px; 14 font-weight: 500; 15 font-weight: 600; 16 border-radius: 3px; 17 padding: 15px 35px; 18 margin: 26px 5px 0 5px; 19 cursor: pointer; 20 } 21 </style> 22 </head> 23 <body> 24 25 <button id="button_1">点击</button> 26 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 27 <script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script> 28 <script type="text/javascript"> 29 $('#button_1').click(function(){ 30 // swal("这是一条信息！"); 31 32 // swal("这是一条信息！", "很漂亮，不是吗？"); 33 34 // swal("干得漂亮！", "你点击了按钮！","success"); 35 36 // swal({ 37 // title: "确定删除吗？", 38 // text: "你将无法恢复该虚拟文件！", 39 // type: "warning", 40 // showCancelButton: true, 41 // confirmButtonColor: "#DD6B55", 42 // confirmButtonText: "确定删除！", 43 // closeOnConfirm: false 44 // }, 45 // function(){ 46 // swal("删除！", "你的虚拟文件已经被删除。", "success"); 47 // }); 48 49 // swal({ 50 // title: "确定删除吗？", 51 // text: "你将无法恢复该虚拟文件！", 52 // type: "warning", 53 // showCancelButton: true, 54 // confirmButtonColor: "#DD6B55", 55 // confirmButtonText: "确定删除！", 56 // cancelButtonText: "取消删除！", 57 // closeOnConfirm: false, 58 // closeOnCancel: false 59 // }, 60 // function(isConfirm){ 61 // if (isConfirm) { 62 // swal("删除！", "你的虚拟文件已经被删除。", 63 // "success"); 64 // } else { 65 // swal("取消！", "你的虚拟文件是安全的:)", 66 // "error"); 67 // } 68 // }); 69 70 // swal({ 71 // title: "漂亮！", 72 // text: "这是自定义图标。", 73 // imageUrl: "http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853" 74 // }); 75 76 // swal({ 77 // title: "HTML <small>标题</small>!", 78 // text: "自定义<span style='color:#F8BB86'>html<span>信息。", 79 // html: true 80 // }); 81 82 // swal({ 83 // title: "自动关闭弹窗！", 84 // text: "2秒后自动关闭。", 85 // timer: 2000, 86 // showConfirmButton: false 87 // }); 88 89 swal({ 90 title: "输入！", 91 text: "输入一些有趣的话：", 92 type: "input", 93 showCancelButton: true, 94 closeOnConfirm: false, 95 animation: "slide-from-top", 96 inputPlaceholder: "输入一些话" 97 }, 98 function(inputValue){ 99 if (inputValue === false) returnfalse; 100 101 if (inputValue === "") { 102 swal.showInputError("你需要输入一些话！"); 103 return false 104 } 105 106 swal("非常好！", "你输入了：" + inputValue,"success"); 107 }); 108 109 // swal({ 110 // title: "Ajax请求示例", 111 // text: "提交运行ajax请求", 112 // type: "info", 113 // showCancelButton: true, 114 // closeOnConfirm: false, 115 // showLoaderOnConfirm: true, 116 // }, 117 // function(){ 118 // setTimeout(function(){ 119 // swal("Ajax请求完成！"); 120 // }, 2000); 121 // }); 122 123 }); 124 </script> 125 </body> 126 </html>