notiFire is a simple library that providing message notification. No jQuery needed!!
view demo
• customizable message content - of course
• customizable color - background / content
• customizable size / border
• customizable opacity / position
• trigger callback when click on the message
// include notiFire.css in the head
<link href="css/notiFire.css" type="text/css" rel="stylesheet">
// include notiFire.js at the end of body
<script src="js/notiFire.js" type="text/javascript"></script>
// there you go!
notifire({
msg: 'this is a test message'
});
• msg - (string, required): the content of your message
• types - (string): choose from 'success', 'info', 'warning', 'danger' or 'default'. Each type have a different background color
• width - (integer): width of the notificatoin message in px
• height - (integer): height of the notificatoin message in px
• color - (string): color of the text message, could be CSS default colors or hex colors
• borderStyle - (string): the border-style of the message div, should be valid border-style value
• borderWidth - (integer): border-width of the message div in px
• borderColor - (string): the border-color of the message div, could be CSS default colors or hex colors
• backgroundColor - (string): the backgroudn-color of the message div, could be CSS default colors or hex colors
• opacity - (float): the opacity value of the message div
• position - (string): 'left' or 'right'
• timeout - (integer): how long do you need to display the message, in ms. 'false' if don't need auto-disappear
• callback - (function): the callback function to trigger when clicking the message to close it
notifire({
msg: 'See how callback is fired',
types: 'info',
width: 300,
height: 200,
color: 'white',
borderStyle: 'solid',
borderWidth: 1,
borderColor: '#33aaee',
backgroundColor: 'blue',
opacity: 0.5,
position: 'right',
timeout: 'false',
callback: function() { alert('callback after full-example has been triggered.'); }
});