A beautiful,responsive,customizable,accessible(wai-aria) replacement for javascript's popup boxes. Demo page.
Swal.fire('Any fool can use a computer')
Swal.fire(
'The Internet?',
'That thing is still around?',
'question'
)
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: 'Why do I have this issue?'
})
Swal.fire({
title: '<strong>HTML <u>example</u></strong>',
icon: 'info',
html:
'You can use <b>bold text</b>,' +
'<a href="//sweetalert2.github.io">links</a>' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i>Great!',
confirmButtonAriaLabel: 'Thumbs up,great!',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i>',
cancelButtonAriaLabel: 'Thumbs down'
})
Swal.fire({
title: 'Do you want to save the changes?',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: `Save`,
denyButtonText: `Don't save`,}).then((result) =>{if(result.isConfirmed){Swal.fire('Saved!','','success')}else if(result.isDenied){Swal.fire('Changes are not saved','','info')}})
Swal.fire({position:'top-end',icon:'success',title:'Your work has been saved',showConfirmButton:false,timer:1500})
Add this to your page:
<link rel="stylesheet" href="libs/animate/animate.min.css" type="text/css">
Swal.fire({title:'Custom animation with Animate.css',showClass:{popup:'animate__animated animate__fadeInDown'},hideClass:{popup:'animate__animated animate__fadeOutUp'}})
Swal.fire({title:'Are you sure?',text:"You won't be able to revert this!",icon:'warning',showCancelButton:true,confirmButtonColor:'#3085d6',cancelButtonColor:'#d33',confirmButtonText:'Yes, delete it!'}).then((result) =>{if(result.isConfirmed){Swal.fire('Deleted!','Your file has been deleted.','success')}})
Swal.mixin({input:'text',confirmButtonText:'Next →',showCancelButton:true,progressSteps:['1','2','3']}).queue([{title:'Question 1',text:'Chaining swal2 modals is easy'},'Question 2','Question 3']).then((result) =>{if(result.value){const answers = JSON.stringify(result.value) Swal.fire({title:'All done!',html:` Your answers:${answers}
`,confirmButtonText:'Lovely!'})}})
const ipAPI = '//api.ipify.org?format=json' Swal.queue([{title:'Your public IP',confirmButtonText:'Show my public IP',text:'Your public IP will be received '+'via AJAX request',showLoaderOnConfirm:true,preConfirm:() =>{return fetch(ipAPI) .then(response =>response.json()) .then(data =>Swal.insertQueueStep(data.ip)) .catch(() =>{Swal.insertQueueStep({icon:'error',title:'Unable to get your public IP'})})}}])