一、下载安装

地址：http://t4t5.github.io/sweetalert/

二、页面引用

当然还有jquery

三、示例

3.1、基础结构

swal("Here's a message!");//以下代码主要修改这里

}

3.2、精简用法

1、标题【alert】-swal(string)

swal("Here's a message!")

2、标题和描述【alert】-swal(string,string)

swal("Title","des")

3.标题、描述、成功【alert】-swal(string,string,string)

swal("Good job!", "You clicked the button!", "success")

3.2、标准用法

4、确认框【confirm】-swal(object)

swal({

title:"Are you sure?",

text:"You will not be able to recover this imaginary file!",

type:"warning",

showCancelButton:true,

closeOnConfirm:false});

其他参数见下表备注

5、确认框【confirm】-swal(object,function())

swal({

title:"Are you sure?",

text:"You will not be able to recover this imaginary file!",

type:"warning",

showCancelButton:true,

confirmButtonColor:"#DD6B55",

confirmButtonText:"Yes, delete it!",

closeOnConfirm:false},function(){

swal("Deleted!", "Your imaginary file has been deleted.", "success");

});

6、确认框【confirm】-swal(object,function(parameter))

参数含义：是否确认isConfirm

swal({

title:"Are you sure?",

text:"You will not be able to recover this imaginary file!",

type:"warning",

showCancelButton:true,

confirmButtonColor:"#DD6B55",

confirmButtonText:"Yes, delete it!",

cancelButtonText:"No, cancel plx!",

closeOnConfirm:false,

closeOnCancel:false},function(isConfirm){if(isConfirm) {

swal("Deleted!", "Your imaginary file has been deleted.", "success");

}else{

swal("Cancelled", "Your imaginary file is safe :)", "error");

}

});

3.4、确认输出框

7、确认输出框确认框【confirm】-swal(object,function(parameter))

注意：type：input

swal({

title:"An input!",

text:"Write something interesting:",

type:"input",

showCancelButton:true,

closeOnConfirm:false,

animation:"slide-from-top",

inputPlaceholder:"Write something"},function(inputValue) {if (inputValue === false) return false;if (inputValue === "") {

swal.showInputError("You need to write something!");return false}

swal("Nice!", "You wrote: " + inputValue, "success");

});

3.5、ajax

8、ajax请求

swal({

title:"Ajax request example",

text:"Submit to run ajax request",

type:"info",

showCancelButton:true,

closeOnConfirm:false,

showLoaderOnConfirm:true,

},function() {

setTimeout(function() {

swal("Ajax request finished!");

},2000);

});