Closeable Floating Toast Notification in JavaScript

Category: Others | September 29, 2022
Author: Mahmoud Kassem
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

The notification is very important for a website where you want to show some important message or alert it. Here we developed Closeable Floating Toast Notification with the help of  Jquery and JavaScript. This push notification is highly customizable in terms of design and functionality. Moreover, it’s a lightweight and easily customizable alert message

By using the Closeable floating notification you can implement it through the toggle button. When a user toggle the button the notification message will appear from the left or right of the page. Additionally, you can also show the message below the toggle button that will appear when it’s clicked.

So if you want to show info to users when they click on a button then you can still use this Toast notification system. You can also use jQuery Top Notification Bar with the Auto Hide functionality to show messages to users.

How to Create Toast Notification using jQuery

In the demo, you will find a small tool that helps you to generate the Javascript code base on function selection. You can select different options from the tool such as Position Y, Position X, Status, Duration, Dismissable, Callback, Custome Sounds, Sounds, Scrollable, RTL, and many more options.

The Customize options allow you to set the additional Class name, color, text, Background Color, link, etc. After customizing the Toast notification you need to press the generate button and get the Javascript code that you will add in the initialize function.

1. To implement the notification system on your webpage you need to Copy-paste the stylesheet <link> into your <head> before all other stylesheets load our CSS, make sure the src matches your project. If you want to add Icon then it is recommended to load Fontawesome because it’s fast in loading. You can also use web fonts for custom icons but not recommended

<link rel="stylesheet" href="src/css/mk-notifications.min.css">

2. After that, you need to place the following <script> near the end of your page, right before closing </body> tag, make sure the href matches your project.

<script href="src/js/mk-notifications.min.js"></script>

3. In the end, To initialize the MK Web Notifications plug-in you should call mkNotifications(); function after your document “DOM” is loaded.

window.addEventListener('load', function() {
    /* MK Web Notification init */
    mkNotifications();
});

Plugin Configuration Options

The following are some advanced configuration options.

OptionDefaultTypeDescription
status‘default’StringIt defines the type of notification. Possible options are Default, Primary, Success, Danger, Warning, Info, Light, Dark, and Purple
dismissabletrueBooleanDecide whether to render the close button to close the toast notification.
duration7000NumberTime duration in milliseconds after that the notification will be closed.
callbacknullFunctionCustom function to execute after notification disappears.
soundfalseBooleanEnable/disable the sound on notification show and close.
customSoundnullStringPath to the custom sound file.

Conclusion

You can use this MK notification javascript plugin in any of your Javascript/HTML projects to show cool notifications and toasts. It’s free to use plugin and open source. There are plenty of customization options that help you to design the toast as you want.