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.
| Option | Default | Type | Description |
|---|---|---|---|
| status | ‘default’ | String | It defines the type of notification. Possible options are Default, Primary, Success, Danger, Warning, Info, Light, Dark, and Purple |
| dismissable | true | Boolean | Decide whether to render the close button to close the toast notification. |
| duration | 7000 | Number | Time duration in milliseconds after that the notification will be closed. |
| callback | null | Function | Custom function to execute after notification disappears. |
| sound | false | Boolean | Enable/disable the sound on notification show and close. |
| customSound | null | String | Path 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.