Minimal Flash Message & Toast Notification Plugin - jQuery flash.js

Minimal Flash Message & Toast Notification Plugin - jQuery flash.js

flash.js is a minimal yet customizable jQuery notification plugin for creating animated flash/toast messaging system to provide unobtrusive user feedback on the web application.

Features:

  • Custom text/background colors.
  • Custom position.
  • Auto hides after a duration time.
  • Or close by clicing the message body.
  • Configurable fade in/out animations.

How to use it:

1. Insert the minified version of the jQuery flash.js plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="flash.min.js"></script>

2. Create a default flash message that displays at the bottom right of the webpage and auto dismisses after 4 seconds.

flash('Default Flash Message');

3. Customize the flash message by passing the following options object as the second parameter to the flash function.

flash('Default Flash Message',{
  // background color
  'bgColor' : '#5cb85c',
  
  // text color
  'ftColor' : 'white',
  // or 'top'
  'vPosition' : 'bottom',
  // or 'left'
  'hPosition' : 'right',
  // duration of animation
  'fadeIn' : 400,
  'fadeOut' : 400,
  // click to close
  'clickable' : true,
  // auto hides after a duration time
  'autohide' : true,
  // timout
  'duration' : 4000
  
});

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

  • Publication date: 22.08.2018
  • Source