Sweet Alert

A beautiful replacement for Javascript's "Alert"

So... What does it do?

Here’s a comparison of a standard error message. The first one uses the built-in alert-function, while the second is using sweetAlert.

alert("Oops... Something went wrong!");

	

sweetAlert("Oops...", "Something went wrong!", "error");

Pretty cool huh? 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!

More examples

In these examples, we're using the shorthand function swal to call sweetAlert.

• A basic message

  Try me!

  swal("Here's a message!")

• A title with a text under

  Try me!

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

• A success message!

  Try me!

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

• A message with auto close timer

  Try me!

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

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

  Try me!

  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".

  Try me!

  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

  Try me!

  swal({
    title: "Sweet!",
    text: "Here's a custom image.",
    imageUrl: "images/thumbs-up.jpg"
  });