如何使用纯JS实现Toas对话框（代码）

来源：皓特汽车网

本篇文章给大家带来的内容是关于如何使用纯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>