为你的博客添加弹窗通知
一个锦上添花的小功能,能更直观的向访客展示网站当前状态或显示信息,这篇文章就来说说如何给你的博客添加 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 后触发的回调函数 |
为你的博客添加弹窗通知