Lightweight jQuery Notification Plugin - ohSnap

Oh Snap is a simple and lightweight jQuery plugin for easily creating different types of notifications in your websites or mobile apps. All the notification types and alert content can be easily customized in CSS and javascript.

How to use it:

1. Include a button to trigger the notification

<a class="button" id="red">Error</a>

2. The CSS for the notification

#ohsnap {
position: fixed;
bottom: 5px;
right: 5px;
margin-left: 5px;
z-index: 99;
}
.alert {
text-align: right;
margin-top: 10px;
padding: 15px;
border: 1px solid #eed3d7;
border-radius: 4px;
float: right;
clear: right;
}
.alert-red {
color: white;
background-color: #DA4453;
}

3. Include jQuery javascript library and jQuery Oh Snap plugin at the bottom of your page

<script src="//code.jquery.com/jquery-latest.min.js"></script> 
<script src="ohsnap.js"></script> 

4. Custom the alert text in the javascript

$('#red').on('click', function() { ohSnap('Oh Snap! You can\'t access this page!', {'color':'red'})});

5. Default options.

// color is  CSS class `alert-color`
'color'       : null,     

// class of the icon to show before the alert text
'icon'        : null,     

// duration of the notification in ms
'duration'    : '5000',   

// id of the alert container
'container-id': 'ohsnap', 

// duration of the fade in/out of the alerts. fast, slow or integer in ms
'fade-duration': 'fast',  

Change log:

2015-11-27

• fixed bugs

2015-09-19

• Fixed: Multiple Alerts not disappearing

2015-05-17

• documented ohSnap and initialize icon-markup to empty string

---

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