Minimal jQuery Popup Notification Plugin - emergejs

Minimal jQuery Popup Notification Plugin - emergejs
File Size: 7.33 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

emergejs is an ultra-light and easy jQuery plugin for creating simple animated notification popups on your website.

Features:

  • 4 built-in notification types: alert, info, success and default.
  • Can be placed anywhere on your web page.
  • Customizable survival time and animation speed.
  • Allows to manually hide the notifications by mouse click.
  • eventClick callback support.
  • Fully customzable via CSS.

How to use it:

1. Add the latest version of jQuery javascript library on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Add the jQuery emergejs plugin's Javascript and CSS on your web page.

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

3. Create a link to toggle a notification.

<a href="#" id="show">Show Notification</a>

4. Create the message for the notification.

<div id="notification-content" class="notification">

Your content goes here

</div>

5. Initialize the plugin and set the position, theme, notification type options for your notification.

$('#show').click(function() {
$( "#notification-content" ).emerge({
theme: 'emerge-base top-right alert',
});
});

6. All the default settings.

content: null,
theme: null,
lifetime: 2400,
speedShow: 200,
speedHide: 200,
hideOnClick: true,
eventClick: function() {}

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