Minimalist Growl-like Notification Plugin For jQuery - zMessage

zMessage is a minimalist jQuery plugin which displays various types of growl-style notification messages on your webpage.

Features:

• 4 types of notifications: default, warning, error and success.
• CSS3 based animations.
• Auto dismiss after a certain duration time.

How to use it:

1. Download and include the zMessage.js script after you've added jQuery library.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="zMessage.js"></script>

2. Display a default notification on the screen.

zMessage({
  message: "Message here"
})

3. Animate the notification message.

@-webkit-keyframes 
zHide {  from {
left: 0px;
}

to { left: 22em; }
}

@keyframes 
zHide {  from {
left: 0px;
}

to { left: 22em; }
}

@-webkit-keyframes 
zShow {  from {
left: 22em;
}

to { left: 0em; }
}

@keyframes 
zShow {  from {
left: 22em;
}

to { left: 0em; }
}

4. Style & position the notification message.

#zmessage ul li {
  padding: 8px 16px;
  margin: 8px 0;
  max-width: 18em;
}

5. All configuration options

zMessage({

  // your message here
  message: "Message here",

  // "success" , "error" and "warning"
  type: 'success',

  // duration time in ms
  time: 2500
  
})

---

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