弹出消息提示jQuery插件

1、新建html文档。

3、书写hmtl代艨位雅剖码。<div class="container"> &造婷用痃lt;div class="row content"> <div class="col-md-6"> <h3>插件特点:</h3> <ul> <li>三个显示位置: right, center or left.</li> <li>六种情景模式: success, info, warning, danger, light, dark.</li> </ul> </div> <div class="col-md-6"> <h3>示例:</h3> <button class="btn btn-success m-2" onclick="$.hulla.send('这是一则成功信息', 'success')">Success</button> <button class="btn btn-info m-2" onclick="$.hulla.send('这是一则信息', 'info')">Info</button> <button class="btn btn-warning m-2" onclick="$.hulla.send('这是一则警告信息!', 'warning')">Warning</button> <button class="btn btn-danger m-2" onclick="$.hulla.send('这是一则危险信息', 'danger')">Danger</button> <button class="btn btn-light m-2" onclick="$.hulla.send('这是一则信息（亮色主题）', 'light')">Light</button> <button class="btn btn-dark m-2" onclick="$.hulla.send('这是一则信息（暗色主题）', 'dark')">Dark</button> </div> </div></div>

5、书写并添加js代码。<script src="js/jquery-1.11.0.min.js"></script><script src="js/bootstrap.min.js"></script><script src="js/hullabaloo.js"></script><script type="text/javascript"> $.hulla = new hullabaloo(); setTimeout(function() { $.hulla.send("Hi！这里！", "success"); }, 1000); setTimeout(function() { $.hulla.send("欢迎您的访问！", "info"); }, 2000); setTimeout(function() { $.hulla.send("想知道插件是如何工作的吗？", "warning"); }, 3000);</script>

7、查看效果。