Create Toast-like Flash Messages - jQuery Flashy

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.

<link href="css/flashy.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="js/flashy.js"></script>

2. Include the latest Animate.css library for extra CSS3 animations.

<link rel="stylesheet" href="/path/to/cdn/animate.min.css" />

3. The JavaScript to display a default flash message on the screen.

flashy('A Flash Message');

4. Execute a function when the flash message is about to close.

flashy('A Flash Message',function(){
  alert('Flashy completed');
});

5. Change the message type. All available types: flashy__info, flashy__danger (default), flashy__success, flashy__warning.

flashy('A Flash Message',{
  type : "flashy__info"
});

6. Specify the time to wait before auto dismissing the flash message. Default: 5000ms.

flashy('A Flash Message',{
  timeout: 3000
});

7. Or make the flash message always be visible until you close it manually.

flashy('A Flash Message',{
  stop : true
});

8. Apply your own CSS animations to the flash message.

flashy('A Flash Message',{
  animatedIn : "animated bounceInRight",
  animatedOut : "animated bounceOutRight",
});

9. Override the default close icon.

flashy('A Flash Message',{
  // requires font awesome iconic font
  icon: '<i class="fas fa-times"></i>',
});

10. Determine whether to manually close the flash message by pressing the ESC key. Default: true.

flashy('A Flash Message',{
  quitESC : false
});

11. Add your own CSS class(es) to the flash message. Default: null.

flashy('A Flash Message',{
  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.