jQuery Flash Message Box to Show Notifications

Flashy.js let you create a flash message box to show notifications. It’s a jQuery plugin which is useful to show alert such as success, warning, and info, etc.

The plugin work in a way so when someone clicks on a link or a button, it wil show a flash message box with some info. When you click on the close button, it will close that box. You can also set the timer in the plugin setting so the message will automatically close after some seconds.

It’s a cross-platform compatible plugin which works with jQuery and can be used for general purpose. It’s useful to show some quick notification for your site visitors.

Furthermore, you can also implement the plugin on some kind of events such as user login, registration or contact form to show an error or successful message.

In addition, the flash.js also supports the Animate CSS library to add various animations and Font awesome icons. It’s the minimal yet customizable plugin which provides you useful feedback on the web application.

How to Use jQuery Flash Message Plugin

Let’s load the important files which include jQuery, Flash’s Javascript and CSS files into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Flashy CSS -->
<link rel="stylesheet" type="text/css" href="css/flashy.min.css">

<!-- Flashy JS -->
<script src="js/flashy.min.js"></script>

Create a DOM element such as a button that will be used to trigger the flash message notification. In our case, we have created three different buttons so you know how to trigger the message on multiple elements.

<ul>
    <li>
        <button class="flashy__success">To click with flashy__success</button>
    </li>
    <li>	
        <button class="flashy__danger">To click with flashy__danger</button>					
    </li>
    <li>	
        <button class="flashy__warning">To click with flashy__warning</button>					
    </li>
</ul>

The Javascript

Finally, you need to initialize the plugin and define the message for each event. As we have three buttons to show three different messages in the HTML so here we will define them by using the click funtion.

define your flash message in plugin’s configuration and initialize it in jQuery document ready function.

<script type="text/javascript">
	$('[class=flashy__success]').click(function() {
		flashy('Flasher your users with flashy', {
			type : 'flashy__success'
		});
	});

	$('[class=flashy__danger]').click(function() {
		flashy('Flasher your users with flashy', {
			type : 'flashy__danger'
		});
	});

	$('[class=flashy__warning]').click(function() {
		var d = flashy('Flasher your users with flashy', {
			type : 'flashy__warning',
			stop : true
		});
	});
</script>

Do you want to change the appearance of flashy? then pass an object in the second parameter as mentioned below:

<script>
 flashy('Hello I'm flashy', {
    type: 'flashy__info'
 });
</script>

here are the types of effects available:

•  flashy__info
• flashy__danger
• flashy__success
• flashy__warning

If you added the animation library then you can use the custom animation.

 flashy('Hello I'm flashy', {
    animatedIn: 'animated bounceInRight',
    animatedOut: 'animated bounceOutRight',
 });

It also supports the Font Awesome Icon and you can easily include with each message box.

 flashy('Hello I'm flashy', {
   icon: '<i class="fa fa-close"> </i>
 });

With the help of its built-in timeout function, you can use the auto-close time.

flashy('Hello I'm flashy', {
   timeout: 5000, 
 });

You can also add an extra class while the flashy release.

 flashy('Hello I'm flashy', {
   addClass: "classname classname classmane"
 });

That’s it.