A beautiful, responsive, customizable, accessible (wai-aria) replacement for javascript's popup boxes. Demo page.
Basic example
Swal.fire('Any fool can use a computer')
A modal with a title,an error icon,a text.
Swal.fire('The Internet?','That thing is still around?','question')
A modal with a title,an error icon,a text,and a footer
Swal.fire({icon:'error',title:'Oops...',text:'Something went wrong!',footer:'Why do I have this issue?'})
Custom HTML description and buttons with ARIA labels
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'})
A dialog with three buttons
Swal.fire({title:'Do you want to save the changes?',showDenyButton:true,showCancelButton:true,confirmButtonText:`Save`,denyButtonText:`Don't save`,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
Swal.fire('Saved!', '', 'success')
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
})
A custom positioned dialog
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
})
Custom animation with
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'
}
})
A confirm dialog, with a function attached to the "Confirm"-button...
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'
)
}
})
Chaining modals (queue) example
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!'
})
}
})
Dynamic queue example
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'
})
})
}
}])