一、下載安裝

地址：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

總結

以上是生活随笔為你收集整理的jq 修改swal的标题_js-jquery-SweetAlert2【一】使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。