Flash.js is a simple JavaScript library allowing you to create and handle HTML flash messages. You can try it yourself here.
You only have to include the flash.js script into your HTML. That's it !
<script src="path/to/flash.min.js"></script>
Use flash.js is very easy. To display a success flash message, you just have to add this line below.
window.FlashMessage.success('This is a successs flash message !');
By default, four verbs are availables : success, warning, error and info.
You can add custom verbs with by call the static method addCustomVerbs on the FlashMessage class :
window.FlashMessage.addCustomVerbs('forbidden', 'example', 'custom'); window.FlashMessage.forbidden('My custom forbidden flash message !');
In the example above, three custom verbs have been added. As you can see, you can now use thses verbs !
You can also create a flash message by instanciating the FlashMessage class or by using the static method create :
new window.FlashMessage('This is a successs flash message !', 'success'); // OR window.FlashMessage.create('Flash.js is awesome !', 'success')
Flash.js also allows you to simply add flash behavior on existing DOM elements (especially if HTML is rendered server-side) :
<div class="flash-container"> <div class="flash-message" data-type="success" data-timeout="8000">My awesome success message !</div> <div class="flash-message" data-type="error" data-timeout="8000">My sadly sad error message !</div> </div
new window.Flash('.flash-message'); // OR window.Flash.create('.flash-message');
However, you can easily use flash.js with the jQuery plugin (by adding behavior on existing DOM elements, when HTML is rendered server-side for example) :
<div class="flash-container"> <div class="flash-message flash-success">My awesome success message with the Flash.js jQuery plugin !</div> <div class="flash-message flash-error">My sadly sad error message with the Flash.js jQuery plugin !</div> </div> <!-- Don't forget to add flash.js jQuery plugin script right after the flash.js library ! --> <script src="path/to/flash.min.js"></script> <script src="path/to/flash.jquery.min.js"></script>
$('document').ready(function () { $('.flash-message').flashjs({ timeout: 5000 }); });
Flash.js can optionnaly takes an object in parameter, as following :
window.FlashMessage.info('Lorem ipsum dolor sit amet, consectetur adipiscing elit.', { progress: true, // displays a progress bar at the bottom of the flash message interactive: true, // Define flash message actions (pause on mouseover, close on click) timeout: 8000, // Flash message timeout appear_delay: 200, // Delay before flash message appears container: '.flash-container', // Flash messages container element selector theme: 'default', // CSS theme (availables: default, dark) classes: { container: 'flash-container', // Custom container css class flash: 'flash-message', // Flash message element css class visible: 'is-visible', // Flash message element css visible class progress: 'flash-progress', // Flash message progress bar element css class progress_hidden: 'is-hidden' // Flash message progress bar element hidden css class } });
You can read the documentation for more informations.