5 Ways to Nicely Alert Users in Javascript

While working on my latest project I came across SweetAlert for Bootstrap. Sweetalert is a simple to use alert tool in javascript. Instead of writing ‘alert’ and get the browser’s standard messaging Sweetalert creates a nicely styled alert box that even has the options for several nice success and alert graphics.

Here’s how to use it. Just add the following to your javascript.

1

swal("Here's a message!")

This would produce this message:

Sweetalert also has easy to create success confirmation.

1

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

There’s also option for a confirmation alert box:

1
2
3
4
5
6
7
8
9
10
11
12

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

Sweetalert is simple and easy to use but their are other alert tools in javascript that may be helpful for your next projects. Here are a few more:

  • jQuery Toastmessage - This JQuery plugin provides android-like notification messages. The toasted messages arrive on the screen in a seamless and natural way.
  • Notify - jQuery plugin which adds simple notifications bars that you can use on your website and application to assist users while they fill in forms, navigate through pages or interact with interface.
  • Sticky - A super simple notification system for jQuery
Apr 18th, 2016