toastr插件浮动弹框剧中优化

效果

toastr是一个异步的信息提示插件,不会影响页面运行
先说最终效果

在这里插入图片描述
我比较喜欢这种风格,代码如下

代码

toastr.success('正在准备下载,请稍等...')

使用起来也很方便

需要引用js

<script src="../vendors/jQuery-toastr/toastr.min.js"></script>
<link rel="stylesheet" href="../vendors/jQuery-toastr/toastr.css">

初始化参数

//jQuery-toastr初始化
toastr.options = {
    "closeButton": true, //是否显示关闭按钮
    "debug": false, //是否使用debug模式
    "positionClass": "toast-center-center",//弹出窗的位置
    "showDuration": "300",//显示的动画时间
    "hideDuration": "1000",//消失的动画时间
    "timeOut": "2500", //展现时间
    "extendedTimeOut": "1000",//加长展示时间
    "showEasing": "swing",//显示时的动画缓冲方式
    "hideEasing": "linear",//消失时的动画缓冲方式
    "showMethod": "fadeIn",//显示时的动画方式
    "hideMethod": "fadeOut" //消失时的动画方式
};

注意"positionClass": "toast-center-center"这个默认是没有这种窗口位置的,所以要修改下toastr.css文件

在末尾加个这个,即可

.toast-center-center {
           top: 10%;
           left: 50%;
           margin-top: -30px;
           margin-left: -150px;
        }
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页