Super Simple jQuery Notification Box Plugin - notify

Super Simple jQuery Notification Box Plugin - notify

notify is a super lightweight and customizable jQuery plugin that allows you to quickly create a notification box with some smooth fade in/out effects.

You might also like:

How to use it:

1. Include jQuery library and jQuery notify on the page

<script src="jquery.min.js"></script>
<script src="jquery-notify.js"></script>

2. Create a html container for your notification box

<div class="notification">

3. The CSS for this example. You can customize the notification box through via CSS.

.notify {
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #BBBBBB 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #BBBBBB 100%);
/* Opera */ 
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #BBBBBB 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #BBBBBB));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #BBBBBB 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #BBBBBB 100%);
border-radius: 5px;
border: 1px solid #BBB;
padding: 20px;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

4. Simply call the plugin and done.


5. You can also create a link to show the notification box

<a href="#" id="show">show notification</a>
<script type="text/javascript">
$("#show").click(function () {


v1.0.0 (2019-04-24)

v0.4.4 (2013-06-11)

  • bug fix for resizing of notification

v0.4.2 (2013-05-29)

  • Added $.notify.create helper for easier creating text notifcations
  • Added default settings configuration per type

v0.3.2 (2013-05-26)

  • Several bug fixes, added notification type and added notifyClass property for adding custom classes

v0.3.1 (2013-05-20)

  • More mobile friendly notifications.
  • Added resize event handler and style fixes for mobile browsers.

v0.3.0 (2013-05-19)

  • Complete redesign of notifications. Added default, success and error notification types and added adjustContent property.

v0.2.0 (2013-05-18)

  • Added queueing system and sticky notifications.
  • Added sticky notifications and close buttons. 
  • Added a queueing system to the container elements for displaying multiple notification messages.

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

  • Publication date: 24.04.2019
  • Source