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

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

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
  }
);

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

  • Publication date: 21.04.2018
  • Source