ohsnap - Simplycode

Oh Snap Notification Jquery Popup

DEMO DOWNLOAD How to Use?

A simple notification jQuery/Zepto library designed to be used in mobile apps

HTML


<div id="ohsnap"></div>

CSS


#ohsnap {
position: fixed;
bottom: 5px;
right: 5px;
margin-left: 5px;
z-index: 99;
}


.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid #eed3d7;
border-radius: 4px;

right: 21px;
/* Each alert has its own width */
float: right;
clear: right;
background-color: white;
width: 250px;
}

.alert-red {
color: white;
background-color: #DA4453;
}
.alert-green {
color: white;
background-color: #37BC9B;
}
.alert-blue {
color: white;
background-color: #4A89DC;
}
.alert-yellow {
color: white;
background-color: #F6BB42;
}
.alert-orange {
color:white;
background-color: #E9573F;
}

JS


<script type="text/javascript" src="js/ohsnap.min.js">
<script type="text/javascript">
ohSnap('We are closed right now. Come back tomorrow.', {'color':'red'}, 4000);
</script>

<script type="text/javascript">
$(doucment).redy(function(){
$('#default').on('click', function() { ohSnap('A notification with default options')});
$('#red').on('click', function() { ohSnap('Oh Snap! You can\'t access this page!',

{'color':'red'})});
$('#green').on('click', function() { ohSnap('Ahh Yeah! Your account was created.',

{'color':'green'})});
$('#blue').on('click', function() { ohSnap('We are closed right now. Come back

tomorrow.', {'color':'blue'})});
$('#yellow').on('click', function() { ohSnap('A yellow alert for your... yellow

needs...', {color:'yellow'})});
$('#orange').on('click', function() { ohSnap('A fast one', {'color': 'orange',

'duration':'100'})});
})
</script>