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文件。

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>                               
<script src="js/hullabaloo.js"></script>
HTML结构

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

<button class="btn btn-info m-2" onclick="$.hulla.send('这是一则信息', 'info')">Info</button>
初始化插件

在页面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