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

Desktop Notification Style Alert & Toast Message Plugin - MK Web Notifications
File Size: 95.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

MK Web Notifications is a jQuery 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.

How to use it:

1. Include the necessary jQuery library and Font Awesome Iconic Font on the webpage.

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" 
      integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" 
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>

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

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

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

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,

  }
);

Change log:

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.