##### SweetAlert

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

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);
        });

add

- help_outline
- widgets
- today
- mail_outline