Growl-Notification

内置漂亮的 UI 效果和多种主题、
轻量级，压缩后只有 18K。
纯 js 编写，没有任何依赖。
支持 IE11+, Safari, Google Chrome, Yandex Browser, Opera, Firefox。

预览

https://c3p7f2.github.io/pages/growl-notification

使用方法

在页面中引入下面的文件。

<link href="light-theme.min.css" rel="stylesheet">
<script src='growl-notification.min.js'></script>

CDN

<link href="https://cdn.jsdelivr.net/gh/c3p7f2/growl-notification@main/light-theme.min.css" rel="stylesheet">
<script src='https://cdn.jsdelivr.net/gh/c3p7f2/growl-notification@main/growl-notification.min.js'></script>

创建通知

GrowlNotification.notify({
    title: 'This is title',
    description: 'My Description'
});

配置参数

GrowlNotification.notify({
    margin: 20,
    type: 'default',
    title: '',
    description: '',
    image: {
        visible: false,
        customImage: ''
    },
    closeTimeout: 0,
    closeWith: ['click', 'button'],
    animation: {
        open: 'slide-in',
        close: 'slide-out'
    },
    animationDuration: .2,
    position: 'top-right',
    showBorder: false,
    showButtons: false,
    buttons: {
        action: {
            text: 'Ok',
            callback: function() {}
        },
        cancel: {
            text: 'Cancel',
            callback: function() {}
        }
    },
    showProgress: false
});

Option	Default	Info
width: number\|string	null	Custom width for notification 100px, 50% and etc.
zIndex: number	1056	Custom z-index for notifications
type: string	'alert'	alert, success, error, warning, info
position: string	'top-right'	top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
title: string	''	This string can contain HTML too. But be careful and don't pass user inputs to this parameter.
description: string	''	This string can contain HTML too. But be careful and don't pass user inputs to this parameter.
image.visible: boolean	false	Show/Hide image
image.customImage: string	''	Path to custom image
closeTimeout: boolean,int	false	false, 1000, 3000, 3500, etc. Delay for closing event in milliseconds (ms). Set 'false' for sticky notifications.
closeWith: [...string]	['click']	click, button
animation.open: string,null,false	'slide-in'	If string, assumed to be CSS class name. If false\|null\|'none', no animation at all. 'slide-in', 'fade-in'
animation.close: string,null,false	'slide-out'	If string, assumed to be CSS class name. If false\|null\|'none', no animation at all. 'slide-out', 'fade-out'
showButtons: true,false	false	Show or hide buttons
buttons: object	`buttons: { action: { text: 'Ok', callback: function {} // callback }, cancel: { text: 'Cancel', callback: function {} // callback } }`	Buttons configuration
showProgress: true,false	false	Show or hide progress bar
GrowlNotification.setGlobalOptions: object	{}	Set global options for all notifications
GrowlNotification.closeAll	-	Close all notifications