仿mac桌面 html5,Bootstrap 4 仿Mac Growl样式toast消息框插件

Hullabaloo.js是一款基于Bootstrap 4 仿Mac Growl样式toast消息框插件。该jquery插件可以制作出类似Mac系统的toast消息框，并且使用简单。它的特点还有：

支持在三个位置显示消息框：right, center 或 left。

支持6种情景模式：success, info, warning, danger, light, dark。

消息框5秒钟后自动消失。

可自定义图标。

消息框会自动往上滚动。

使用方法

在页面中引入jquery，bootstrap4相关文件，以及font-awsome字体文件，和hullabaloo.js文件。

HTML结构

可以使用一个按钮来触发toast消息框。

Info

初始化插件

在页面DOM元素加载完毕之后，通过new hullabaloo()方法来初始化该插件。

var hulla = new hullabaloo();

可以通过下面的语法来触发消息框。

hulla.send("Success Message", "success");

hulla.send("Info Message", "info");

hulla.send("Warning Message", "warning");

hulla.send('Danger Message', 'danger')

hulla.send('Light Theme', 'light')

hulla.send('Dark Theme', 'dark')

配置参数

Hullabaloo.js 基于Bootstrap 4 仿Mac Growl样式toast消息框插件可用的配置参数有：

var hulla = new hullabaloo({

// where to append the notifications

ele: "body",

// offset

offset: {

from: "top",

amount: 20

},

// or 'center', 'left'

align: "right",

// width

width: 250,

// for auto dismiss

delay: 5000,

allow_dismiss: true,

// space between notification boxes

stackup_spacing: 10,

// notification message here

text: "Notification Message Here",

// Font Awesome icon

icon: "times-circle",

// styles

status: "danger",

// additional CSS classes

alertClass: "",

// callback functions

fnStart: false,

fnEnd: false,

fnEndHide: false,

});

Hullabaloo.js 基于Bootstrap 4 仿Mac Growl样式toast消息框插件的github地址为：https://github.com/OzyAst/Hullabaloo