bootstrap扩展插件bootstrap-notify的使用

1.准备工具：

bootstrap-notify的GitHub下载地址：https://github/mouse0270/bootstrap-notify

bootstrap-notify的官方文档：http://bootstrap-growl.remabledesigns/

bootstrap-notify依赖的css及js文件：

jquery :                     <script src="assets/js/jquery-1.10.2.min.js"></script> <!-- Load jQuery -->

bootstrap的css:          <link href="assets/css/bootstrap.min.css" type="text/css" rel="stylesheet">

bootstrap的js：           <script src="assets/js/bootstrap.min.js"></script> <!-- Load Bootstrap -->

bootstrap-notify的js     <script src="assets/js/bootstrap-notify.min.js"></script> <!--  Notify -->

 

2.简单代码及注释：

var notify = $.notify({

// options

icon: 'glyphicon glyphicon-warning',//显示图片

title: '警告',//标题

message: "成功！",//信息

target: '_blank'//显示目标对象

}, {

// settings

element: 'body',//生成html位置

position: 'absolute',//位置类型

type: "warning",//消息框类型

allow_dismiss: true,//显示删除按钮

newest_on_top: true,

showProgressbar: true,//显示进度条

placement: {//位置

from: "top",//垂直位置

align: "right"//水平位置

},

offset: 0,//偏移量

spacing: 10,//消息框间距

z_index: 1031,//z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

delay: 10000,//延时显示时长

timer: 1000,//定时刷新时长

url_target: '_blank'

});

 

3.效果展示：