MK Web Notifications v2.0
Easy to use CSS, JavaScript notifications, for in browser notifications and toasts
{ size: 5.69 Kb }
Getting Started Examples
Getting Started
MK Notifications is a JavaScript plug-in can be used in any JavaScript project to allow you to show cool notifications and toasts, it is free to use LICENSE and open soruce, simply follow the Getting Started guide below to implement MK Notifications in your project.
Fontawesome is required for the plugin pre setted statues, you can use other webfonts for custom icons, but not recommended.
Download [ GitHub ]CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS, make sure the src matches your project.
<link rel="stylesheet" href="src/css/mk-notifications.min.css">Copy
JS
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>Copy
HTML
To initialize 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();
});For additional configurations please check the Documentation section.
Quick Start
Call mkNoti(title,message,{ /* Options */ }); function in DOM Ready function or in any DOM Ready function or element to show MK Web Notification in default style.
/* MK Web Notification Show */For notification options please check the Documentation section.
mkNoti(
'MK Web Notifications (Info)',
'Example of generated notification with status Info',
{ sound: true }
);Try
Examples
Use the Notifications Generator tool to generate any options you want to use, then simple copy the code and use in your project.
Themes
Build your own custom theme or use the secondery theme by calling it right after css file.
Notifications Generator
Code
Documentation
Please use the code generator.