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
