Success And Error Notification Plugin - jQuery MessageSystem.js

MessageSystem.js is a web/browser push notification inspired jQuery notification plugin that helps you handle success and/or error messages on your web applications.

Simple, lightweight and mobile friendly. By default the success/error notification messages will be placed in the lower right corner of the screen. The plugin will automatically re-position the notifications and display them on the top of the screen on the mobile devices.

How to use it:

1. Load the latest jQuery library and Font Awesome iconic font in the document.

<link rel="stylesheet" href="/path/to/fontawesome.min.css">
<script src="/path/to/jquery.min.js"></script>

2. Load the jQuery MessageSystem.js plugin's files in the document.

<link rel="stylesheet" href="css/MessageSystem.css">
<script src="js/MessageSystem.js"></script>

3. Create success/error notification messages that will auto dismiss after 10 seconds.

ms.Notification({
  type : "success",
  message: "This is a success notification!"
});

ms.Notification({
  type : "error",
  message: 'This is an error notification!'
});

4. Customize the icon & icon color.

if(this.type=='success'){
  icon = 'far fa-check-circle';
  color = '#71b200';
} else if (this.type =='error'){
  icon = 'fas fa-exclamation-triangle';
  color = '#c34d4d';
}

5. Specify the time to wait before closing the notification in the setTimeout() method.

setTimeout(() => {

  notification.fadeOut(200, function(){

    $(this).remove();

    if(!$('#ms-notification-area').html()){

      $('#ms-notification-area').remove();

    }

  });

}, 10000);

---

This awesome jQuery plugin is developed by BartkowiczPiotr. For more Advanced Usages, please check the demo page or visit the official website.