noty 可以在页面上多个位置弹出通知提示文本

官网

NOTY - a dependency-free notification library

引入插件所需 css/js 文件

1. noty v3 并不依赖于 jQuery ，noty v2 需要依赖 jQuery

<link href="${ctx }/assets/plugins/noty/css/noty.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctx }/assets/plugins/noty/js/noty.min.js"></script>

调用插件初始化方法

new Noty({
    type: "success",
    layout: "topRight",
    theme: "sunset",
    text: "Hello World！！！",
    timeout: 3000,
    progressBar: true,
    closeWidth: ["button"],
    animation: {
        open: 'noty_effects_open',
        close: 'noty_effects_close'
    },
    id: false,
    force: false,
    killer: false,
    queue: "global",
    container: false,
    modal: false,
	  callbacks: {
		afterClose: function () { ... }
	  }
}).show();

API

1. type : alert
   • 消息类型
   • alert_success_error_warning_info
2. layout : topRight
   • 显示位置
   • 顶部：top_topLeft_topCenter/topRight
   • 中部：center_centerLeft_centerRight
   • 底部：bottom_bottomLeft_bottomCenter/bottomRight
3. theme : mint
   • 主题样式
   • relax_mint_metroui_sunset_bootstrap-v3/bootstrap-v4/semanticui/nest
4. text : “”
   • 显示文本
5. timeout : false
   • 超时时间，默认 false 表示不超时
   • 可填写具体毫秒数，即表示超时时间为多少毫秒
6. progressBar : true
   • 是否显示进度条
   • 只有 timeout 不为 false 时，progressBar 才有效
7. closeWith : [‘click’]
   • 关闭方式
   • 选择 click 后将会在右上角出现一个关闭按钮
   • 选择 button 后点击文本则会关闭通知