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;
        }