jQuery Plugin To Create Animated Bootstrap Alerts - notify

File Size: 3.91 KB
Views Total: 9210
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Animated Bootstrap Alerts - notify

jQuery notify is a simple jQuery plugin that extends the Bootstrap's alerts component to create animated & fully customizable notification messages on your web page.

Features:

  • 5 notification types: default, success, warning, danger and info.
  • Custom notification positions.
  • Auto dismiss notifications after a timeout.

How to use it:

1. Include the Bootstrap's CSS and the notify.css in the document's head section.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="notify.css" rel="stylesheet">

2. Include jQuery library and the notify.js at the bottom of the document.

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

3. Show a basic notification with default options.

$.notify('I am a default notification box.');

4. Show a 'Success' notification.

$.notify('I am a success box.', 'success');

5. All the default options.

$.notify({

// custom notification message
message: "",

// 'default', 'info', 'error', 'warning', 'success'
status: "default",

// timeout in ms
timeout: 5000,

// 'top-center','top-right', 'bottom-right', 'bottom-center', 'bottom-left'
pos: 'top-center',

// z-index style for alert container
zIndex: 10400,

// Function to call on alert close
onClose: function() {}

});

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