SweetAlert automatically 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 message!

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

A warning message, with a function attached to the "Confirm"-button...


    swal({    title: "Are you sure?",
              text: "You will not be able to recover this imaginary file!",   
              type: "warning",   
              showCancelButton: true,   
              confirmButtonColor: "#DD6B55",   
              confirmButtonText: "Yes, delete it!",   
              closeOnConfirm: false }, 
              function(){   
              swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
              });
    

... and by passing a parameter, you can execute something else for "Cancel".


    swal({   title: "Are you sure?",   
             text: "You will not be able to recover this imaginary file!",   
             type: "warning",   
             showCancelButton: true,   
             confirmButtonColor: "#DD6B55",   
             confirmButtonText: "Yes, delete it!",   
             cancelButtonText: "No, cancel plx!",   
             closeOnConfirm: false,   
             closeOnCancel: false }, 
             function(isConfirm){   
                 if (isConfirm) {     
                     swal("Deleted!", "Your imaginary file has been deleted.", "success");   } 
                 else {
                     swal("Cancelled", "Your imaginary file is safe :)", "error");   } 
            });

A message with a custom icon


    swal({   
         title: "Sweet!",   
         text: "Here's a custom image.",   
         imageUrl: "images/favicon/favicon-32x32.png" 
    });

An HTML message


    swal({   title: "HTML Title!",   
             text: "A custom html message.",   
             html: true 
        });

A message with auto close timer


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

A replacement for the "prompt" function


                swal({   title: "An input!",   
                         text: "Write something interesting:",   
                         type: "input",   showCancelButton: true,   
                         closeOnConfirm: false,   
                         animation: "slide-from-top",   
                         inputPlaceholder: "Write something" }, 
                         function(inputValue){   
                             if (inputValue === false) return false;      
                             if (inputValue === "") {     
                             swal.showInputError("You need to write something!");     
                             return false   
                             }      
                        swal("Nice!", "You wrote: " + inputValue, "success"); 
                    });

With a loader (for AJAX request for example)


                swal({   title: "Ajax request example",   
                         text: "Submit to run ajax request",   
                         type: "info",   showCancelButton: true,   
                         closeOnConfirm: false,   
                         showLoaderOnConfirm: true, }, 
                         function(){   
                             setTimeout(function(){     swal("Ajax request finished!");   }, 2000); 
                    });