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", //显示时的动画缓冲