SweetAlertDemo

  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>
posted on 2020-04-30 11:27 JentZhang 阅读(158) 评论(0) 编辑收藏举报