This time I will share jQuery Plugin and tutorial about Create Toast-like Flash Messages – jQuery Flashy, hope it will help you in programming stack.
The jQuery Flashy plugin helps you send minimal clean yet highly customizable, CSS3 animated, toast-like flash messages to the end-users.
How to use it:
1. To use the plugin, include jQuery and the Flashy’s files on the page.
1 |
<link href="css/flashy.css" rel="stylesheet" /> |
2 |
<script src="jquery.min.js"></script> |
3 |
<script src="js/flashy.js"></script> |
2. Include the latest Animate.css library for extra CSS3 animations.
1 |
<link rel="stylesheet" href="/path/to/cdn/animate.min.css" /> |
3. The JavaScript to display a default flash message on the screen.
1 |
flashy('A Flash Message'); |
4. Execute a function when the flash message is about to close.
1 |
flashy('A Flash Message',function(){ |
2 |
alert('Flashy completed'); |
5. Change the message type. All available types: flashy__info, flashy__danger (default), flashy__success, flashy__warning.
1 |
flashy('A Flash Message',{ |
6. Specify the time to wait before auto dismissing the flash message. Default: 5000ms.
1 |
flashy('A Flash Message',{ |
7. Or make the flash message always be visible until you close it manually.
1 |
flashy('A Flash Message',{ |
8. Apply your own CSS animations to the flash message.
1 |
flashy('A Flash Message',{ |
2 |
animatedIn : "animated bounceInRight", |
3 |
animatedOut : "animated bounceOutRight", |
9. Override the default close icon.
1 |
flashy('A Flash Message',{ |
3 |
icon: '<i class="fas fa-times"></i>', |
10. Determine whether to manually close the flash message by pressing the ESC key. Default: true.
1 |
flashy('A Flash Message',{ |
11. Add your own CSS class(es) to the flash message. Default: null.
1 |
flashy('A Flash Message',{ |
2 |
addClass : 'classes here' |
This awesome jQuery plugin is developed by zonkedcode. For more Advanced Usages, please check the demo page or visit the official website.
