Push Notification Style Alert jQuery Plugin - msngr.js

Push Notification Style Alert jQuery Plugin - msngr.js

msngr.js is a small jQuery plugin to create minimal, auto-dismissable, toast-like alert popups with circular progress bars similar to the desktop/browser notification.

1. Include jQuery JavaScript library and the jQuery msngr.js plugin's files on the html page.

<link rel="stylesheet" href="css/messenger.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/messenger.js"></script>

2. Include the Font Awesome for custom alert icons (OPTIONAL).

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

3. Include the progressbar.min.js for the circular countdown bar displayed in the alert popup (OPTIONAL).

<script src="js/progressbar.min.js"></script>

4. Initialize the plugin.

var messenger = new Messenger();

5. Create a new alert notification popup on the screen.

messenger.run({
  // unique ID
  'id':'001',
  // unique name
  'name':'alpha',
  // alert title
  'title':'Hello world...',
  // alert message
  'message':'How are you doing today?', // content
  // duration of timer
  'duration':4500, 
  // theme name
  'theme':'light', 
  // font awesome icon fa-{value}
  'icon':'bolt', 
  // top-right | bottom-right | bottom-left | top-left
  'location':'bottom-right'
  
});

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

  • Publication date: 16.02.2018
  • Source