SweetAlertautomatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable,as you can see below!

A basic message

swal("Here's a message!")

A title with a text under

swal("Here's a message!","It's pretty, isn't it?")

A Success Alert

swal({title:'Success',icon:'success'})

An Error Message

swal({title:'Error',icon:'error'})

A Info Alert

swal({title:'Info',icon:'info'})

An Warning Alert

swal({title:'Warning',icon:'warning'})

A success message with button!

swal("Good job!","You clicked the button!","success")

A Warning Alert with "Confirm" button

swal({title:"Are you sure?",text:"You will not be able to recover this imaginary file!",icon:'warning',buttons:{cancel:true,delete:'Yes, Delete It'}})

You can execute something else for "Cancel".

swal({title:"Are you sure?",text:"You will not be able to recover this imaginary file!",icon:'warning',dangerMode:true,buttons:{cancel:'No, Please!',delete:'Yes, Delete It'}}).then(function(willDelete){if(willDelete){swal("Poof! Your imaginary file has been deleted!",{icon:"success",})}else{swal("Your imaginary file is safe",{title:'Cancelled',icon:"error",})}});

A message with a custom icon

swal({title:"Sweet!",text:"Here's a custom image.",icon:'../app-assets/images/favicon/apple-touch-icon-152x152.png'});

An HTML message

var el = document.createElement('span'),t = document.createTextNode("Custom HTML Message!!");el.style.cssText = 'color:#F6BB42';el.appendChild(t);swal({title:'HTML Alert!',content:{element:el,}});

A message with auto close timer

swal({title:"Auto close alert!",text:"I will close in 2 seconds.",timer:2000,buttons:false});

A replacement for the "prompt" function

swal("Write something interesting:",{content:"input",}) .then((value) =>{if(value === false) return false;if(value === ""){swal("You need to write something!","","error");return false}swal(`You typed:${value}`)})

With a loader(for AJAX request for example)

swal({text:'Search for a movie. e.g. "La La Land".',content:"input",button:{text:"Search!",closeModal:false,},}) .then(name =>{if(!name) throw null;return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`)}) .then(results =>{return results.json()}) .then(json =>{const movie = json.results[0];if(!movie){return swal("No movie was found!")}const name = movie.trackName;const imageURL = movie.artworkUrl100;swal({title:"Top result:",text:name,icon:imageURL,})}) .catch(err =>{if(err){swal("Oh noes!","The AJAX request failed!","error")}else{swal.stopLoading();swal.close()}})});
add