当前位置:主页 > JavsScript库 > 通知 / 提示 >

JavaScript中的动画通知对话框 - notification.js
栏目分类:通知 / 提示   发布日期:2021-09-28   浏览次数:

一个轻量级的动画通知 JavaScript 库,可帮助您创建类似 toast 的 Flash 消息和确认对话框弹出窗口。

如何使用它:

1. 在 HTML 文档中加载样式表 notification.css 和 JavaScript notification.js。

<link href="./notification.css" rel="stylesheet" />
<script src="./notification.js"></script>

2. 创建一个新的弹出实例。

const popup = Notification({
      // 这里的选项
});

3. 创建吐司风格的通知。

popup.info({
  title: '标题',
  message: '内容',
});
 
popup.success({
  title: '标题',
  message: '内容',
});
 
popup.warning({
  title: '标题',
  message: '内容',
});
 
popup.error({
  title: '标题',
  message: '内容',
});
 
// 或
popup.showPopup({ 
  type: Type, 
  title: Title, 
  message: Message,
});


4. 创建一个确认对话框。

popup.dialog({
  title: '标题',
  message: '内容',
  callback: function(result){
    // do something
  }
});
 
// 或
popup.showPopup({ 
  type: 'dialog', 
  title: Title, 
  message: Message,
  callback: callback,
});


5. 自定义通知对话框的持续时间和位置。

const popup = Notification({
       
      // 'top-right', 'bottom-left'
      // 'top-left', 'center'
      position: 'bottom-right',
 
      // 以毫秒为单位
      duration: 3000,
       
});



官方网站:https://github.com/amaterasusan/notification

相关热词: 通知对话框

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库