How to implement Toas dialog box using pure JS (code)-JS Tutorial-php.cn

How to implement Toas dialog box using pure JS (code)

不言

Release： 2018-09-17 16:14:53

Original

1389 people have browsed it

The content of this article is about how to use pure JS to implement the Toas dialog box (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<!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>

Copy after login

The above is the detailed content of How to implement Toas dialog box using pure JS (code). For more information, please follow other related articles on the PHP Chinese website!