网页自定义toast提示框
toast弱提示是应用里很常见的提示方式,它的特点是:动画出现、屏幕居中、停留一段时间自动消失。
网页原生的alert弹框不是很受大家喜欢,于是自己动手写一个,封装成方法,放在公共库里,以后用作提示信息很方便。
![](https://upload-images.jianshu.io/upload_images/13079544-99924c9f7707d4d1.gif?imageMogr2/auto-orient/strip|imageView2/2/w/405/format/webp)
一:用JS动态创建一个div元素,并为元素加上逐渐显示的动画,将这个元素添加到body里,并且通过定时器让这个提示信息逐渐消失并移除
var toast = function(params) {
/*设置信息框停留的默认时间*/
var time = params.time;
if(time == undefined || time == ''){
time = 1500;
}
var el = document.createElement("div");
el.setAttribute("class", "web-toast");
el.innerHTML = params.message;
document.body.appendChild(el);
el.classList.add("fadeIn");
setTimeout(function () {
el.classList.remove("fadeIn");
el.classList.add("fadeOut");
/*监听动画结束,移除提示信息元素*/
el.addEventListener("animationend", function () {
document.body.removeChild(el);
});
el.addEventListener("webkitAnimationEnd", function () {
document.body.removeChild(el);
});
}, time);
}
二:toast的浮现消失使用css3动画定义,并且使用定位使其在屏幕居中显示
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-moz-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-o-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-ms-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-webkit-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-moz-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-o-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-ms-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
.web-toast{
position: fixed;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
line-height: 1;
padding:10px;
border-radius: 3px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
z-index: 9999;
white-space: nowrap;
}
.fadeOut{
animation: fadeOut .5s;
}
.fadeIn{
animation:fadeIn .5s;
}
三:调用封装好的toast提示函数
webToastObj({
message:"我是Toast提示框",
time:2000
})
参数说明:
message:提示信息,必传
time:提示信息显示时间,默认1500,可不传
使用起来是不是很简单方便呢
原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
90后前端一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流。