一、下载安装
地址：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
