CSS3 Animated Alert Notification JavaScript Library – messg.js

messg.js is a lightweight JavaScript plugin used to create CSS3 animated alert / success / warning / info / error messages with close buttons and custom action buttons.

How to use it:

Download the messg.js and include the JS & CSS files into your document.

<link href="index.css" rel="stylesheet">
<script src="index.js"></script>

Create custom messages on your web page.

// default message with specified delay
messg.default(Message, Delay)
// success message with specified delay
messg.success(Message, Delay)
// info message with specified delay
messg.info(Message, Delay)
// warning message with specified delay
messg.warning(Message, Delay)
// error message with specified delay
messg.error(Message, Delay)

Create a notification message with a close button.

messg
  .success('Success!')
  .button('Ok');

Create a notification message with actions buttons like a confirm dialog.

messg
  .warning('Are you sure?')
  .button('Yes', function() {
    // do something
  })
  .button('No', function() {
    // do something
  });

Set options for your notification options.

// animation speed
messg.set('speed', 250)
// top or bottom
messg.set('potision', 'top')
// enable message flow
messg.set('flow', false)

Changelog:

07/31/2018

• v2.2.0