先给效果图
下边是代码：
git地址 https://codeseven.github.io/toastr/ 下载插件包，解压到本地，一般引用其中build文件夹下toastr.css和toastr.min.js，使用toastr.css而不是toastr.min.css，是为了方便自定义改样式布局等等。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 引用toastr 的 css js -->
<link href="css/toastr.css" rel="stylesheet">
< style type="text/css" >
//这里新增一个居中弹窗位置样式，建议将这段代码放入toastr.css中，
//js中使用toastr.options.positionClass = 'toast-center-center'指定当前消息位置样式
.toast-center-center {
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -150px;
}
</style >
</head>
<body>
<!-- html内容 -->
<!-- 引用jquery 和 toastr 的js -->
<script src="js/jquery.min.js"></script>
<script src="js/toastr.min.js"></script>
<script>
//初始化 toastr 弹窗位置
toastr.options.positionClass = 'toast-center-center';
toastr.success("成功");
toastr.info("通知");
toastr.warning("警告");
toastr.error("错误");
clear_toastr(1500);
// 动态设置toastr消息提示时间,一段时间后清除所有提示框
function clear_toastr(time){
setTimeout(
function(){
toastr.clear();
}, time);
}
</script>
</body>
</html>参考：
源码下载 https://codeseven.github.io/toastr/
清空消息 http://www.jq22.com/jquery-info476
使用案例 https://blog.csdn.net/cyh1111/article/details/53141037
样式位置 https://blog.csdn.net/jiong_long/article/details/72972993