如何使用纯JS实现Toas对话框（代码）
程序员文章站
2022-04-12 07:49:53
...
本篇文章给大家带来的内容是关于如何使用纯JS实现Toas对话框（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>toast</title>
</head>
<style media="screen">
@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}
}
#toast{
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
line-height: 1;
padding:10px;
border-radius: 3px;
position: absolute;
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;
}
.hide{
display: none;
}
.fadeOut{
animation: fadeOut .5s;
}
.fadeIn{
animation:fadeIn .5s;
}
</style>
<body></body>
</html>
<script>
var toast = function(params){
var el = document.createElement("p");
el.setAttribute("id","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(){
el.classList.add("hide");
});
},params.time);
};
//使用
toast({
message:"提交成功",
time:1500
});
/*------------------------
author:codeTnt
date:2018/7/13
-------------------------*/
</script>
以上就是如何使用纯JS实现Toas对话框（代码）的详细内容，更多请关注其它相关文章！
上一篇： Vue组件选项props的使用介绍
下一篇： python绘图库的基本操作方法介绍