相信大家在使用百度云网盘的时候一定见过以下这种消息提示框，那么那这种消息提示框的效果是如何实现的呢，或者说通过什么插件实现的呢？那答案就是通过 toastr 插件使用的，那么本文将对插件的使用提供了一种解决方案。
插件下载：
下载链接：https://download.csdn.net/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。
如果大家对以上的解决方案还有问题，或者还有其他的见解，欢迎在评论区留言哦~
版权声明：本文为weixin_43819566原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。