So implementieren Sie das Toas-Dialogfeld mit reinem JS (Code)-js-Tutorial-php.cn

So implementieren Sie das Toas-Dialogfeld mit reinem JS (Code)

不言

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

Original

1371 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem JS zur Implementierung des Toas-Dialogfelds (Code). Ich hoffe, dass er für Sie hilfreich ist.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Toas-Dialogfeld mit reinem JS (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!