相信大家在使用百度云网盘的时候一定见过以下这种消息提示框，那么那这种消息提示框的效果是如何实现的呢，或者说通过什么插件实现的呢？那答案就是通过toastr插件使用的，那么本文将对插件的使用提供了一种解决方案。
插件下载：
下载链接：/download/weixin_43819566/16399353
资源引入：
<!--toastr--><link href="toastr/toastr.css" rel="stylesheet" /><script src="toastr/toastr.min.js"></script>
案例演示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>toastr插件演示</title><!--bootstrap--><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="bootstrap/js/jquery-3.3.1.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script><!--toastr--><link href="toastr/toastr.css" rel="stylesheet" /><script src="toastr/toastr.min.js"></script><style>.container{margin-top: 200px}.container .btn{font-size: 18px;}</style></head><body><div class="container"><div class="col-sm-offset-2 col-sm-2"><button class="btn btn-default" id="normal">正常提示框</button></div><div class="col-sm-2"><button class="btn btn-default" id="success">成功提示框</button></div><div class="col-sm-2"><button class="btn btn-default" id="warning">警告提示框</button></div><div class="col-sm-2"><button class="btn btn-default" id="error"> 错误提示框</button></div></div></body></html><script>$(function (){//提示框初始化参数toastr.options = {closeButton: false, // 是否显示关闭按钮，（提示框右上角关闭按钮）debug: false,// 是否使用deBug模式progressBar: false, // 是否显示进度条，（设置关闭的超时时间进度条）positionClass: "toast-top-center",// 设置提示款显示的位置onclick: null,// 点击消息框自定义事件showDuration: "300",// 显示动画的时间hideDuration: "1000",// 消失的动画时间// timeOut: "1500",// 自动关闭超时时间extendedTimeOut: "1000",// 加长展示时间showEasing: "swing",// 显示时的动画缓冲方式hideEasing: "linear",// 消失时的动画缓冲方式showMethod: "fadeIn",// 显示时的动画方式hideMethod: "fadeOut" // 消失时的动画方式};})</script><script>//成功提示信息function success_prompt_alert(content) {if (content == null) {content = '';}var len = content.length;if (len <= 10 && len > 0) {toastr.options.timeOut = "1800";} else if (len <= 20) {toastr.options.timeOut = "2800";} else if (len <= 30) {toastr.options.timeOut = "3800";} else if (len > 30) {toastr.options.timeOut = "4800";}toastr.success(content);}//警告提示信息function warning_prompt_alert(content) {if (content == null) {content = '';}var len = content.length;if (len <= 10 && len > 0) {toastr.options.timeOut = "1800";} else if (len <= 20) {toastr.options.timeOut = "2800";} else if (len <= 30) {toastr.options.timeOut = "3800";} else if (len > 30) {toastr.options.timeOut = "4800";}toastr.warning(content);}//错误提示信息function error_prompt_alert(content) {if (content == null) {content = '';}var len = content.length;if (len <= 10 && len > 0) {toastr.options.timeOut = "1800";} else if (len <= 20) {toastr.options.timeOut = "2800";} else if (len <= 30) {toastr.options.timeOut = "3800";} else if (len > 30) {toastr.options.timeOut = "4800";}toastr.error(content);}//正常提示信息function info_prompt_alert(content) {if (content == null) {content = '';}var len = content.length;if (len <= 10 && len > 0) {toastr.options.timeOut = "1800";} else if (len <= 20) {toastr.options.timeOut = "2800";} else if (len <= 30) {toastr.options.timeOut = "3800";} else if (len > 30) {toastr.options.timeOut = "4800";}toastr.info(content);}</script><script>$(function (){$('#normal').click(function (){info_prompt_alert("正常提示")})$('#success').click(function (){success_prompt_alert("成功提示")})$('#warning').click(function (){warning_prompt_alert("警告提示")})$('#error').click(function (){error_prompt_alert("错误提示")})})</script>
效果演示：
注意：
引入资源之后，如果项目报错，那么需要检查，是否引入 jquery.js。
如果大家对以上的解决方案还有问题，或者还有其他的见解，欢迎在评论区留言哦~
