Tiny jQuery Toast Notification Plugin - rustaMsgBox

rustaMsgBox is a lightweight and easy jQuery plugin to display toast notification in a popup message box that slides out from the bottom of the page as you see in Android or iOS. Supports 4 built-in types of notification (info, warning, success, error) and you can easily create your own types/styles via CSS.

See also:

• Android Style jQuery Toaster Messages Plugin - cftoaster
• jQuery Mobile Android-like Toast Message Plugin - Mobile Toast

How to use it:

1. Include jQuery library and the jQuery rustaMsaBox plugin in the footer so the pages load faster.

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

2. Create a button to trigger a message box.

<button id="demo">Message</button>

3. Create messages and set the options in the javascript.

<script type="text/javascript">
$(document).ready(function() {
$('#show-info-message').on('click', function(){
$.rustaMsgBox({ 
"content" : "hi I'm the rusta message box",
"mode": 'info', 
});
});
}); 
</script>

4. Create custom styled message box.

<style type="text/css">
.custom-msgBox {
...
}
</style>

<button id="demo" class="custom-msgBox">Message</button>

<script type="text/javascript">
$(document).ready(function() {
$('#demo').on('click', function(){
$.rustaMsgBox({ 
"customClass" : 'custom-msgBox'
});
});
}); 
</script>

5. Available options with default values.

<script type="text/javascript">
$(document).ready(function() {
$('#show-info-message').on('click', function(){
$.rustaMsgBox({ 
closeButton: false,
fadeOut: true,
fadeTimer: 1500,
content: 'Add some content here...',
zindex: 3022,
width: '70%',
maxWidth: '300px',
mode: 'info', /* warning, success, error, info */
bottom: '-90px',
opacity: 0.9
});
});
}); 
</script>

Change log:

2015-07-01

• stack messages on top of each other, when multiple rustaMsgBox elements are present

---

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