sweetalert的使用

1.swal()方法中的參數：

2.引入css與js，通過cdn加速服務

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

3.常用

1.

swal("Pikachu fainted! You gained 500 XP!");

2.

swal({
title : "支付成功",
type : "success",
confirmButtonText : "確定",
closeOnConfirm : false
});

結果

 

　3.

swal("刪除失敗","重新操作",'error');

　　效果：

 

　4.

                                swal({
						title:'',
						text:"請掃描用戶手機上的付款碼",
						type:'input',
						showCancelButton: true, 
						closeOnConfirm: false, 
						cancelButtonText: "取 消", 
						confirmButtonText: "確 認", 
						imageUrl:'../../../../img/scancode.gif',
						inputPlaceholder:"請填寫付款碼數字",
						showLoaderOnConfirm:true      
                                  })

　　運行結果

5.

swal({
			title:"是否刪除",
			text:"",
			type:"warning",
			showCancelButton:true,//是否顯示取消按鈕
			cancelButtonText:'取 消',//按鈕內容
			cancelButtonColor:'#b9b9b9',

			showConfirmButton:true,
			confirmButtonText:'確 認',
			confirmButtonColor:"#dd6b55",

			closeOnConfirm:false,//點擊返回上一步操作
			closeOnCancel:true
		},function(){//正確按鈕進行的操作點
			$.ajax({
				url: './test.json',
				type: 'post',
				dataType: 'json',
				data: {"id": $('#inp').val()},
			})
			.done(function(res) {
				if (!$('#inp').val()) {
					swal("輸入內容哦……");
					return;
				}
				if (res.status == '000') {
					swal('刪除成功','請繼續操作','success');
					return;
				}else{
					swal('刪除失敗','','error');
				}
				// console.log("success");
			})
			.fail(function() {//連接服務器失敗進行的操作
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			});
			
		});

　　

6.確認輸入

swal({
						title:'',
						text:"請掃描用戶手機上的付款碼",
						type:'input',
						showCancelButton: true, 
						closeOnConfirm: false, 
						cancelButtonText: "取 消", 
						confirmButtonText: "確 認", 
						imageUrl:'../../../../img/scancode.gif',
						inputPlaceholder:"請填寫付款碼數字",
						showLoaderOnConfirm:true
					},function(inputValue){
						if (inputValue == '') {
							swal.showInputError('請填寫付款碼數字');
							return;
						}
						if (inputValue == false) {
							swal('','','success');
							return;
						}
						
						swal('ok');
					});

　　效果：

 

官網：http://www.dglives.com/demo/sweetalert-master/example/