Tạo thông báo Notification với thư viện PNotify

Plugin này có tác dụng tạo ra thông báo ở góc màn hình để thông báo 1 sự kiện nào đó vừa được thực hiện. Thực tế có thể áp dụng vào việc như vừa update xong thông tin, vừa xóa xong 1 bài viết, hay vừa có 1 bài viết mới...

Link plugin: https://sciactive.com/pnotify/
Link gitbub: https://github.com/sciactive/pnotify

Để tải code về ta sử dụng NPM: npm install --save pnotify

Code file index.html như sau:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="node_modules/pnotify/dist/PNotifyBrightTheme.css">
</head>
<body>
    <button id="pn-1">
        Click me
    </button>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="node_modules/pnotify/dist/iife/PNotify.js"></script>
    <script src="node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#pn-1').click(function(event) {
                PNotify.success({
                    title: 'Xin Chào',
                    text: 'Hello sempai!',
                    addclass: 'btn btn-success', // add class vào nút
                    icon: 'fa fa-home', // sử dụng font awesome, cần add font mới hiện
                    delay: 1000, // thời gian xuất hiện
                    modules: {
                        Buttons: {
                            sticker: false // bỏ nút sticker 
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>

Tải ví dụ demo tại https://ufile.io/jozvf1gz