toastr是一个基于jQuery简单、漂亮的消息提示插件，使用简单、方便，可以根据设置的超时时间自动消失。
相关文件到官网去下载即可
1、引入toastr的js和css文件
1 <link href="/toastr/build/toastr.css" rel="stylesheet"> 2 <script src="/toastr/build/toastr.min.js"></script>
2、初始化toastr（此处是自定义）
toastr.options = { closeButton: false, //是否显示关闭按钮（提示框右上角关闭按钮） debug: false, //是否为调试； progressBar: true, //是否显示进度条（设置关闭的超时时间进度条） positionClass: "toast-bottom-center", //消息框在页面显示的位置 onclick: null, //点击消息框自定义事件 showDuration: "300", //显示动作时间 hideDuration: "1000", //隐藏动作时间 timeOut: "2000", //自动关闭超时时间 extendedTimeOut: "1000", showEasing: "swing", hideEasing: "linear", showMethod: "fadeIn", //显示的方式 hideMethod: "fadeOut" //隐藏的方式 };
//常规消息提示，默认背景为浅蓝色 toastr.info("你有新消息了!"); //成功消息提示，默认背景为浅绿色 toastr.success("你有新消息了!"); //警告消息提示，默认背景为橘黄色 toastr.warning("你有新消息了!"); //错误消息提示，默认背景为浅红色 toastr.error("你有新消息了!"); //带标题的消息框 toastr.success("你有新消息了!","消息提示"); //另一种调用方法 toastr["info"]("你有新消息了!","消息提示");