为你的博客添加弹窗通知
一个锦上添花的小功能，能更直观的向访客展示网站当前状态或显示信息，这篇文章就来说说如何给你的博客添加 iziToast 弹窗通知插件。
开始
引入 css 和 js:
1 | <head> |
选项
默认选项:
1 | iziToast.show({ |
52 个参数详解（将官网描述翻译后）：
| 参数 | 默认值 | 描述 |
|---|---|---|
| class | ‘’ | 将应用于 Toast 的类，它可以用作参考 |
| title | ‘’ | Toast 的标题 |
| titleColor | ‘’ | 标题颜色 |
| titleSize | ‘’ | 标题字体大小 |
| titleLineHeight | ‘’ | 标题行高度 |
| message | ‘’ | 通知消息 |
| messageColor | ‘’ | 消息颜色 |
| messageSize | ‘’ | 消息颜色 |
| messageLineHeight | ‘’ | 消息文字行高 |
| backgroundColor | ‘’ | Toast 的背景色 |
| theme | ‘’ | 它可以是浅色或深色，也可以设置其他类。像 “.iziToast-theme-name” 这样创建和使用 |
| color | ‘’ | 它可以是 #hexadecimal 的、预定义的主题，如蓝色、红色、绿色和黄色，也可以设置另一个类。像 “.iziToast-color-name” 这样创建和使用 |
| icon | ‘’ | 图标类（你选择的字体图标 Icomoon, Fontawesome 等) |
| iconText | ‘’ | 图标文本（使用文本的字体图标、, Material Icons等） |
| iconColor | ‘’ | 图标颜色 |
| iconUrl | null | 要加载的文件的地址 |
| image | ‘’ | 封面图片 |
| imageWidth | 50 | 封面图片的宽度 |
| maxWidth | null | 设置 Toast 的最大宽度 |
| zindex | 99999 | Toast 的 z-index CSS 属性 |
| layout | 1 | 它可以是 1 或 2，也可以使用其他布局，创建如下所示的类：“.iziToast-layout3” |
| balloon | false | 应用像气球一样的 Toast |
| close | true | 显示“x”关闭按钮 |
| closeOnEscape | false | 允许使用 Esc 键关闭 Toast |
| closeOnClick | false | 允许单击它来关闭 Toast |
| rtl | false | RTL 选项 |
| position | ‘bottomRight’ | 它将在哪里显示。它可以是 bottomRight、bottomLeft、topRight、topLeft、topCenter、bottomCenter 或 center |
| target | ‘’ | 要显示 Toast 的固定位置 |
| targetFirst | true | 将 Toast 添加到第一个位置 |
| false | 等待另一个 Toast 在 “onClosed” 函数上关闭。 | |
| displayMode | 0 | - 等待 Toast 关闭，以便你可以打开它（使用 1 或 “once”） - 替换已打开的 Toast（使用 2 或 “replace”） |
| timeout | 5000 | 以毫秒为单位关闭 Toast 的数量，或以 false 为禁用 |
| drag | true | 拖动功能，用于关闭 Toast |
| pauseOnHover | true | 当光标位于 Toast 超时上时，暂停 Toast 超时 |
| resetOnHover | false | 当光标位于 Toast 超时上时，重置 Toast 超时 |
| progressBar | true | 启用超时进度条 |
| progressBarColor | ‘’ | 进度条颜色 |
| progressBarEasing | ‘linear’ | 动画进度条的缓和 |
| overlay | false | 允许在页面上显示叠加层 |
| overlayClose | false | 允许关闭 Toast 单击覆盖层 |
| overlayColor | ‘rgba(0, 0, 0, 0.6)’ | 叠加背景颜色 |
| animateInside | true | 启用 Toast 中元素的动画 |
| buttons | {} | 你可以指定按钮数组 |
| inputs NEW | {} | 你可以指定输入数组 |
| transitionIn | ‘fadeInUp’ | 默认 Toast 打开动画。它可以是：bounceInLeft、bounceInRight、bounceInUp、bounceInDown、fadeIn、fadeInDown、fadeInUp、fadeInLeft、fadeInRight 或 flipInX |
| transitionOut | ‘fadeOut’ | 默认 Toast 关闭动画。它可以是：fadeOut、fadeOutUp、fadeOutDown、fadeOutLeft、fadeOutRight、flipOutX |
| transitionInMobile | ‘fadeInUp’ | 默认 Toast 打开移动过渡 |
| transitionOutMobile | ‘fadeOutDown’ | 默认 Toast 关闭移动过渡 |
| onOpening | function() {} | 打开 Toast 时触发的回调函数 |
| onOpened | function() {} | 打开 Toast 后触发的回调函数 |
| onClosing | function() {} | 关闭 Toast 时触发的回调函数 |
| onClosed | function() {} | 关闭 Toast 后触发的回调函数 |
为你的博客添加弹窗通知
