Easy JavaScript Code for Notifications and Toast in the Browser

MK Notifications is easy to use, JavaScript notifications, for browser notifications and toast. MK Notifications is a JavaScript plugin that can be used in any JavaScript project, allowing you to show off cool notifications and toast.

bs alert plugin, jquery toast message, bootstrap toast slide animation, hide toast message jquery, alert fade out automatically, toast on page load

Features:

Font Awesome-based notification icons.
Custom X and Y positions.
Allows setting the maximum number of notifications to display at a time.
9 built-in themes: Default, Basic, Success, Danger, Warning, Information, Light, Dark, Violet.
Supports RTL and LTR.
Allows associating notifications.
No jQuery (since 2.x) required.

How to make use of it:

1. Include necessary Font Awesome Iconic Font in the webpage.

<link rel="stylesheet" href="/path/to/fontawesome.min.css" />

2. Include the JavaScript and CSS files of the MK Web Notifications extension.

<link href="dist/css/mk-notifications.min.css" rel="stylesheet" />
<script src="dist/js/mk-notifications.min.js"></script>

3. Configure the MK Web Notifications plugin and we are ready to go.

window.addEventListener('load', function() {
  mkNotifications();
});

4. Create a new notification box on the web page.

mkNoti(
  'Notification Title',
  'Notification Body'
);

5. Configure the MK Web Notifications plugin.

mkNotifications({
  positionY: 'right',
  positionX: 'bottom',
  scrollable: true,
  rtl: false, // true = ltr
  max: 5 // number of notifications to display
});

6. Customize the notification box with the following options.

mkNoti(
  'Notification Title',
  'Notification Body', {

    // Default, Primary, Success, Danger, Warning, Info, Light, Dark, Purple
    status: 'default',

    // Custom icon
    icon: {
      class: null,
      color: null,
      background: null
    },

    // Linkify the notification box
    link: {
      url: null,
      target: '_self',
      function: null
    },

    // Is dismissable?
    dismissable: true,

    // Auto dismisses after 7 seconds
    duration: 7000,

    // Callback function
    callback: null,

    // Enable sounds
    sound: false,

    // Custom sound files
    customSound: null,

  }
);

Desktop Notification Style Alert & Toast Message Plugin, MK Notifications Github