弹窗通知 - 武恩赐博客💻

复制提醒

<script>
    document.body.oncopy = function () {
        iziToast.info({
            timeout: 4000, // 关闭弹窗的时间
            icon: 'Fontawesome', // 图标类别
            closeOnEscape: 'true', // 允许使用Esc键关闭弹窗
            transitionIn: 'bounceInLeft', // 弹窗打开动画
            transitionOut: 'fadeOutRight', // 弹窗关闭动画
            displayMode: 'replace', // 替换已经打开的弹窗
            layout: '2', // Medium模式
            position: 'topRight', // 弹窗位置
            icon: 'fa-regular fa-copy', // 图标类名
            backgroundColor: '#fff', // 弹窗背景色
            title: '复制成功', // 通知标题
            message: '请遵守 CC BY-NC-SA 4.0 协议' // 通知消息内容
        });
    }
</script>

哀悼纪念日通知

<script>
let myDate = new Date;
let mon = myDate.getMonth() + 1;
let date = myDate.getDate();
let days = ['4.4', '5.12', '7.7', '9.9', '9.18', '11.30', '12.13'];// 哀悼日期
for (let day of days) {
    let d = day.split('.');
    if (mon == d[0] && date == d[1]) {
        document.write(
            '<style>html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none}img{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%)}</style>'
            );// 哀悼灰色
        window.addEventListener('load', function () {
            setTimeout(function () {
            iziToast.show({
            icon: 'Fontawesome', // 图标类别
            closeOnEscape: 'true', // 允许使用Esc键关闭弹窗
            transitionIn: 'bounceInLeft', // 弹窗打开动画
            transitionOut: 'fadeOutRight', // 弹窗关闭动画
            displayMode: 'replace', // 替换已经打开的弹窗
            layout: '1', // Medium模式，1是单行，2是双行
            position: 'topRight', // 弹窗位置
            icon: 'fad fa-copy', // 图标类名
            backgroundColor: '#fff', // 弹窗背景色
            timeout: 14000,// 关闭弹窗的时间
            icon: "fa-duotone fa-candle-holder",
            title: '今天是中国国家纪念日', // 通知标题
            //message: '全站已切换为黑白模式' // 通知消息内容
                });
            },
        }, 
    }
}
</script>

引入文件

<link rel="stylesheet" href="https://bolg.wuenci.wang/webfonts/pro.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/izitoast/1.4.0/css/iziToast.css">
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/izitoast/1.4.0/js/iziToast.js"></script>

其他方面
这里列出一些经常需要的参数

对象	默认值	描述
title	/	弹窗的标题
message	/	弹窗的消息
timeout	5000	关闭弹窗的时间（以毫秒为单位）, false 则常驻
icon	/	图标类（您选择的字体图标, Icomoon, Fontawesome 等）
layout	1 / 2	弹窗的样式（单行 / 双行）
displayMode	0	等待直到弹窗关闭，您才能将其打开（使用 1 ）
替换已经打开的弹窗（使用 replace ）
position	bottomRight	默认的弹窗显示位置
bottomRight,bottomLeft,topRight, topLeft,topCenter, bottomCenter,center
transitionIn	fadeInUp	默认的弹窗打开动画
bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
transitionOut	fadeOut	默认的弹窗关闭动画
fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX

弹窗美化
阴影优化

.iziToast:after {
    border-radius: 8px!important;
}
.iziToast {
  background: #333 none repeat scroll 0 0 !important;
}
.iziToast-title.slideIn {
    color: #aaa !important;
}
.iziToast-message.slideIn {
    color: #aaa !important;
}
.iziToast-icon {
    color: #aaa !important;
}
.iziToast > .iziToast-progressbar {
    background: rgb(51, 51, 51) !important;
}
.iziToast > .iziToast-progressbar > div {
    background: rgb(170, 170, 170) !important;
}
.iziToast > .iziToast-close {
   
    background-size: 8px !important;
}