Tiny jQuery Toast Notification Plugin - rustaMsgBox

Tiny jQuery Toast Notification Plugin - rustaMsgBox
File Size: 35.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.