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.fire("Here's a message!")

A title with a text under

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

A success message!

Swal.fire("Good job!", "You clicked the button!", "success")

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


                  Swal.fire({    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.fire("Deleted!", "Your imaginary file has been deleted.", "success");
                });
              

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


              Swal.fire({   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.fire("Deleted!", "Your imaginary file has been deleted.", "success");   }
              else {
              Swal.fire("Cancelled", "Your imaginary file is safe :)", "error");   }
            });
          

A message with a custom icon


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

An HTML message


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

A message with auto close timer


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

A replacement for the "prompt" function


      Swal.fire({   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.fire("Nice!", "You wrote: " + inputValue, "success");
  });

With a loader (for AJAX request for example)


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