时间:2021-07-01 10:21:17 帮助过:1人阅读
- <!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对话框(代码)的详细内容,更多请关注Gxl网其它相关文章!