当前位置:Gxlcms > JavaScript > 如何使用纯JS实现Toas对话框(代码)

如何使用纯JS实现Toas对话框(代码)

时间:2021-07-01 10:21:17 帮助过:1人阅读

本篇文章给大家带来的内容是关于如何使用纯JS实现Toas对话框(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>toast</title>
  6. </head>
  7. <style media="screen">
  8. @keyframes fadeIn {
  9. 0% {opacity: 0}
  10. 100% {opacity: 1}
  11. }
  12. @-webkit-keyframes fadeIn {
  13. 0% {opacity: 0}
  14. 100% {opacity: 1}
  15. }
  16. @-moz-keyframes fadeIn {
  17. 0% {opacity: 0}
  18. 100% {opacity: 1}
  19. }
  20. @-o-keyframes fadeIn {
  21. 0% {opacity: 0}
  22. 100% {opacity: 1}
  23. }
  24. @-ms-keyframes fadeIn {
  25. 0% {opacity: 0}
  26. 100% {opacity: 1}
  27. }
  28. @keyframes fadeOut {
  29. 0% {opacity: 1}
  30. 100% {opacity: 0}
  31. }
  32. @-webkit-keyframes fadeOut {
  33. 0% {opacity: 1}
  34. 100% {opacity: 0}
  35. }
  36. @-moz-keyframes fadeOut {
  37. 0% {opacity: 1}
  38. 100% {opacity: 0}
  39. }
  40. @-o-keyframes fadeOut {
  41. 0% {opacity: 1}
  42. 100% {opacity: 0}
  43. }
  44. @-ms-keyframes fadeOut {
  45. 0% {opacity: 1}
  46. 100% {opacity: 0}
  47. }
  48. #toast{
  49. background: rgba(0, 0, 0, 0.7);
  50. color: #fff;
  51. font-size: 14px;
  52. line-height: 1;
  53. padding:10px;
  54. border-radius: 3px;
  55. position: absolute;
  56. left: 50%;
  57. top: 50%;
  58. transform: translate(-50%,-50%);
  59. -webkit-transform: translate(-50%,-50%);
  60. -moz-transform: translate(-50%,-50%);
  61. -o-transform: translate(-50%,-50%);
  62. -ms-transform: translate(-50%,-50%);
  63. z-index: 9999;
  64. }
  65. .hide{
  66. display: none;
  67. }
  68. .fadeOut{
  69. animation: fadeOut .5s;
  70. }
  71. .fadeIn{
  72. animation:fadeIn .5s;
  73. }
  74. </style>
  75. <body></body>
  76. </html>
  77. <script>
  78. var toast = function(params){
  79. var el = document.createElement("p");
  80. el.setAttribute("id","toast");
  81. el.innerHTML = params.message;
  82. document.body.appendChild(el);
  83. el.classList.add("fadeIn");
  84. setTimeout(function(){
  85. el.classList.remove("fadeIn");
  86. el.classList.add("fadeOut");
  87. el.addEventListener("animationend", function(){
  88. el.classList.add("hide");
  89. });
  90. },params.time);
  91. };
  92. //使用
  93. toast({
  94. message:"提交成功",
  95. time:1500
  96. });
  97. /*------------------------
  98. author:codeTnt
  99. date:2018/7/13
  100. -------------------------*/
  101. </script>

以上就是如何使用纯JS实现Toas对话框(代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行