当前位置：首页 > 网页特效 > 弹出层

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

分类：弹出层日期：2024-05-14 点击(5) 评论(0)

简介

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

```html
<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消息框。

```html
<button class="btn btn-info m-2" onclick="$.hulla.send('这是一则信息', 'info')">Info</button>
```
#####  初始化插件
在页面DOM元素加载完毕之后，通过new hullabaloo()方法来初始化该插件。

```html
var hulla = new hullabaloo();
```
可以通过下面的语法来触发消息框。

```html
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消息框插件可用的配置参数有：

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