html toastr.js 悬浮通知（h5 toast 提示）

卓越笔记

发布于 2023-02-18 16:31:34

4.7K0

发布于 2023-02-18 16:31:34

文章被收录于专栏：卓越笔记卓越笔记

资源地址

github: https://github.com/CodeSeven/toastr

官网：https://codeseven.github.io/toastr/

cdn 资源地址：https://www.bootcdn.cn/toastr.js/

在线测试地址：http://www.shouce.ren/api/jq/5733e3732c588/index.html

使用步骤

1. 引入相关文件，需要引入 jquery：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>

2. 调用：

<script>
    toastr.options = { 
        // toastr配置
        "closeButton": true, //是否显示关闭按钮
        "debug": false, //是否使用debug模式
        "progressBar": true, //是否显示进度条，当为false时候不显示；当为true时候，显示进度条，当进度条缩短到0时候，消息通知弹窗消失
        "positionClass": "toast-top-center",//显示的动画位置
        "showDuration": "400", //显示的动画时间
        "hideDuration": "1000", //消失的动画时间
        "timeOut": "7000", //展现时间
        "extendedTimeOut": "1000", //加长展示时间
        "showEasing": "swing", //显示时的动画缓冲方式
        "hideEasing": "linear", //消失时的动画缓冲方式
        "showMethod": "fadeIn", //显示时的动画方式
        "hideMethod": "fadeOut" //消失时的动画方式
    }

    //调用方式
    toastr.error("错误");
    toastr.success("成功")
    toastr.warning("失败")
    toastr.info("你好")
</script>

positionClass （弹框信息显示位置）可选项：

toast-top-right 顶部右边
toast-botton-right 底部右边
toash-bottom-left 底部左边
toast-top-left 顶部左边
toast-top-full-width 顶部宽度铺满整个屏幕
toast-bottom-full-width 底部宽度铺满整个屏幕
toast-top-center 顶端中间
toast-bottom-center 底部中间