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