jq 修改swal的标题_js-jquery-SweetAlert2【一】使用
一、下載安裝
地址：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【一】使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用计算机探索规律反思,用计算器探索规律教
- 下一篇： JAVA入门第一天