一、下载安装

地址：https://github.com/limonte/sweetalert2

二、页面引用

当然还有jquery

三、示例

3.1、基础结构

window.οnlοad=function(){

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.3、标准使用

swal({

title:‘Auto close alert!‘,

text:‘I will close in 2 seconds.‘,

type: ‘success‘}).then(function([isConfirm]) {},//handling the promise rejection

function(dismiss) {//dismiss can be ‘cancel‘, ‘overlay‘,

//‘close‘, and ‘timer‘

}

)

4、输入框

swal({

title:‘Submit email to run ajax request‘,

input:‘email‘,

showCancelButton:true,

confirmButtonText:‘Submit‘,

showLoaderOnConfirm:true,

preConfirm:function(email) {return new Promise(function(resolve, reject) {

setTimeout(function() {if (email === ‘taken@example.com‘) {

reject(‘This email is already taken.‘)

}else{

resolve()

}

},2000)

})

},

allowOutsideClick:false}).then(function(email) {

swal({

type:‘success‘,

title:‘Ajax request finished!‘,

html:‘Submitted email: ‘ +email

})

})

View Code

5.模态进度输入

swal.setDefaults({

input:‘text‘,

confirmButtonText:‘Next →‘,

showCancelButton:true,

animation:false,

progressSteps: [‘1‘, ‘2‘, ‘3‘]

})var steps =[

{

title:‘Question 1‘,

text:‘Chaining swal2 modals is easy‘},‘Question 2‘,‘Question 3‘]

swal.queue(steps).then(function(result) {

swal.resetDefaults()

swal({

title:‘All done!‘,

html:‘Your answers:

‘ +JSON.stringify(result)+

‘

‘,

confirmButtonText:‘Lovely!‘,

showCancelButton:false})

},function() {

swal.resetDefaults()

})

View Code

6.问题框ajax

swal.queue([{

title:‘Your public IP‘,

confirmButtonText:‘Show my public IP‘,

text:‘Your public IP will be received ‘ +

‘via AJAX request‘,

showLoaderOnConfirm:true,

preConfirm:function() {return new Promise(function(resolve) {

$.get(‘https://api.ipify.org?format=json‘)

.done(function(data) {

swal.insertQueueStep(data.ip)

resolve()

})

})

}

}])

View Code

7.自定义宽、高等

swal({

title:‘Sweet!‘,

text:‘Modal with a custom image.‘,

imageUrl:‘https://unsplash.it/400/200‘,

imageWidth:400,

imageHeight:200,

animation:false})

View Code

8.标准确认取消

swal({

title:‘Are you sure?‘,

text:"You won‘t be able to revert this!",

type:‘warning‘,

showCancelButton:true,

confirmButtonColor:‘#3085d6‘,

cancelButtonColor:‘#d33‘,

confirmButtonText:‘Yes, delete it!‘,

cancelButtonText:‘No, cancel!‘,

confirmButtonClass:‘btn btn-success‘,

cancelButtonClass:‘btn btn-danger‘,

buttonsStyling:false}).then(function() {

swal(‘Deleted!‘,‘Your file has been deleted.‘,‘success‘)

},function(dismiss) {//dismiss can be ‘cancel‘, ‘overlay‘,

//‘close‘, and ‘timer‘

if (dismiss === ‘cancel‘) {

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

}

})

View Code

取消没有确认

swal({

title:‘Are you sure?‘,

text:"You won‘t be able to revert this!",

type:‘warning‘,

showCancelButton:true,

confirmButtonColor:‘#3085d6‘,

cancelButtonColor:‘#d33‘,

confirmButtonText:‘Yes, delete it!‘}).then(function() {

swal(‘Deleted!‘,‘Your file has been deleted.‘,‘success‘)

})

View Code