Sweet Alert

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) =>{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'})})}}])
On this page