Desktop Notification Style Alert & Toast Message Plugin - MK Web Notifications

MK Web Notifications is a jQuery JavaScript plugin used for generating Desktop Notification style alert and toast message boxes that slide in from the edge of your screen.

Features:

• Font Awesome based notification icons.
• Custom X and Y positions.
• Allows to specify the max number of notifications to display at a time.
• 9 built-in themes: Default, Primary, Success, Danger, Warning, Info, Light, Dark, Purple.
• RTL and LTR supported.
• Allows to linkify the notifications.
• No jQuery required (since v2.x).

How to use it:

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

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

2. Include the MK Web Notifications plugin's JavaScript and CSS files.

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

3. Initialize the MK Web Notifications plugin and we're ready to go.

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

4. Create a new notification box on the webpage.

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

5. Config 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,

  }
);

Changelog:

v2 (2021-09-22)

• No JQuery required.
• Fixes and improvments.

v1.5.3 (2018-04-27)

• Added theme as option.
• Improved Notification Generator.
• Fixed errors and bugs in sound.
• Improved RTL compatibility.

---

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