Hello Readers,

This blog is about about implementation of sweet alerts in our application.

Sweet alerts are the beautiful replacement of javascript's alerts. They look great on laptop,desktop, mobile and tablet. They are perfect for all screen resolution and automatically center itself on page.

Installation of SweetAlert:

You can install it through bower or npm

bower install sweetalert
npm install sweetalert

You can download SweetAlert javascript and css files through below link:

Download files

Include these files into your index.html.

For example:

<link href="css/sweetalert.css" rel="stylesheet">

<script src="js/sweetalert.min.js"></script>

Examples

Note: swal is a shorthand function to call SweetAlert.

• Basic Sweet alert

swal("Here's a message!")

• Sweet Alert has four model type ie. "warning", "error", "success" and "info".Which will show related icons.

Success Message on click of button

swal("Congratulations!", "You clicked the button!", "success")

A warning message, with a "Confirm-button". You can attach a function to this confirm button.

swal({
       title: "Are you sure?",
       text: "Do you want to remove file!",
       type: "warning",
       showCancelButton: true,
       confirmButtonText: "Confirm",
       closeOnConfirm: false
     },
     function(){
        swal("Deleted!", "Deleted successfully", "success");
     });

An error message on page load.

swal("Error...!", "No data found!", "error");

An Info message on click of a button.

swal("Network", "you are using 3G network...!", "info");

A message with custom icon.

swal({
   title: "Image!",
   text: "Here's a custom image.",
   imageUrl: "img/star.png"
});

A message with Html tags and inline css.

swal({
      title: "Welcome to <br> Uttarakhand",
      text: "Hope you <span style='color:#f00;'>will like it.</span>",
      html: true
});

For more information visit below link:

SweetAlert

Enjoy and implement SweetAlert place of Javascript Alerts.... :)