插件介绍

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

• 支持在三个位置显示消息框：right, center 或 left。
• 支持6种情景模式：success, info, warning, danger, light, dark。
• 消息框5秒钟后自动消失。
• 可自定义图标。
• 消息框会自动往上滚动。

使用方法

在页面添加如下引用包

    <link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/css/hullabaloo/hullabaloo.min.css.css" rel="stylesheet">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/hullabaloo/hullabaloo.min.js"></script>
   <!--初始化插件-->
    <script type="text/javascript">
        $.hulla = new hullabaloo();
    </script>

HTML中

<button onclick="$.hulla.send('这是一则信息', 'info')">Info</button>

js中

 $.hulla.send("错误信息", "danger");

配置参数

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,
    
});

bootartap中文文档

Bootstrap 4 仿Mac Growl样式toast消息框插件