如何使用HMTL，CSS和JavaScript创建Snackbar？

网页设计中的小吃店是显示在网站上的通知。有时，开发人员希望向用户显示其他通知，使他们知道某些重要信息，但同时不应影响用户体验。该信息可以是有关网站内已经发生或将要发生的某种事件的信息，无论它是否成功，还是需要用户的快速输入或干预。

小吃店通知用户网站将要执行的流程，或提供有关网站已执行的流程的反馈。例如，不成功的API调用等。它们通常发生在网站内屏幕的底部，并且不应妨碍当前的流量或用户体验。除非需要用户干预，否则它们通常会自行消失。小吃栏一次只能显示一个，以免阻塞屏幕。它们通常包含单个操作，例如Dismiss / Cancel / Ok ，也可以用作错误处理的一部分。它们也可以由自定义操作触发，例如用户单击按钮时。

Bootstrap和jQuery通过类和插件为小吃栏通知提供了广泛的支持，但也可以仅通过使用HTML ， CSS和JavaScript来设计和实现它们，而无需任何外部库。同样重要的是要知道，许多Web框架(例如Angular 4 +，ReactJS等)和Android应用程序也提供对Snackbar通知的支持，并且可以使用自己的类和方法来实现它们。有关详细的说明，请参阅以下文章：

• 如何在Android中添加小吃店
• 如何创建SnackBar服务?

在本教程中，我们将仅使用HTML，CSS和JavaScript为网站实现Snackbar通知。
我们假设您熟悉HTML和CSS规则，并且具有CSS动画的基本知识。

• 步骤1：使用npm安装Browsersync 。我们将使用Browsersync来启动服务器，并提供URL来查看HTML网站，CSS动画并加载相应的JavaScript文件。我们将在全球范围内安装Browsersync 。

  npm install -g browser-sync

• 步骤2：在您的项目根文件夹中创建一个“ index.html”文件，一个index.css文件和一个index.js 。
  • index.html：在该文件中添加以下代码段。

    html

        
        
        GeeksforGeeks
        
        
    
    
        
         GeeksforGeeks - Snackbar using HTML, CSS & JS
        
      
        
        
             Show Snackbar
        
        Hello GeeksforGeeks
        
        

  • index.css：默认情况下，我们使用CSS可见性属性将#snackbar HTML元素设置为隐藏。我们还定义了位置：固定的；固定的；固定的。和z-index：1； Snackbar通知的CSS属性，以使其在可见时始终显示在用户屏幕上方。请参阅代码注释以更好地理解。 ！important CSS属性指出，将忽略HTML DOM元素上的所有其他冲突规则，并将应用！important表示的规则。此规则将覆盖所有之前设置的CSS规则。我们已经使用简单的CSS动画通过淡入屏幕和淡出屏幕来向用户显示Snackbar通知。可以在此处找到其详细说明。 CSS动画设置的总时间取决于我们希望通知对用户可见的时间限制。淡出CSS动画的时间是通过从本例中的总时间中减去0.5秒相应地计算得出的。

    的CSS

    #snackbar {
        /* By Default, Hidden */
        visibility: hidden; 
        min-width: 250px;
        background-color: #333;
        color: #fff;
        text-align: left;
        border-radius: 2px;
        padding: 16px;
        /* To always Keep on 
           Top of screen */
        position: fixed;
      
        /* To be displayed above 
           Parent HTML DOM element  */ 
        z-index: 1; 
      
        /* Position Bottom Left 
           Corner of Screen */
        left: 10px;
        bottom: 30px;
    }
      
    /* Dynamically Appending this 
       Class to #snackbar via JS */
    .show-bar {
        visibility: visible !important;
        /* fadeout Time decided in 
           accordance to Total Time */
        /* In case, Time = 3s, 
           fadeout 0.5s 2.5s */
        animation: fadein 0.5s, fadeout 0.5s 4.5s;
    }
      
    /* when the Snackbar Appears */
    @keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }
        to {
            bottom: 30px;
            opacity: 1;
        }
    }
      
    /* when the Snackbar Disappears
       from the Screen */
    @keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }
        to {
            bottom: 0;
            opacity: 0;
        }
    }
    

  • index.js：单击Show Snackbar按钮时，我们已使用JavaScript将类动态添加到HTML div元素。 showSnackbar()函数由onClick HTML Button属性触发。动态附加的类将CSS规则添加到#snackbar HTML元素中，从而使用户可见。我们使用setTimeout() JavaScript函数在5秒钟后动态删除了先前附加的Class，这将使Snackar通知消失。

    JS

    function showSnackbar() {
        var snackBar = 
          document.getElementById("snackbar")
        // Dynamically Appending class
        // to HTML element 
        snackBar.className = "show-bar";
      
        setTimeout(function () {
           // Dynamically Removing the Class 
           // from HTML element
           // By Replacing it with an Empty
           // String after 5 seconds
           snackBar.className = 
              snackBar.className.replace("show-bar", ""); 
        }, 5000);
    }
    

• 步骤3：我们已成功使用HTML，CSS和JavaScript实现了Snackbar通知。在HTML中，我们定义了一个自定义的Show Snackbar按钮，它将在屏幕上触发Snackbar通知。 Snackbar通知是一条简单的文本消息，正在向用户显示。由于Snackbar是一个简单的HTML“ div”元素，因此我们可以向Snackbar通知中添加自定义操作。例如，如果需要，可以使用“输入框”或“关闭按钮”。在我们的情况下，小吃栏通知将在5秒钟后自动从屏幕上消失。
  输出：
  
• 步骤4：至此，我们的Snackbar通知已准备就绪。要使用Browsersync启动应用程序，请在项目目录中运行以下命令，也可以将HTML文件直接运行到浏览器中。

  browser-sync start --server --files "*"

  这将以服务器模式启动Browsersync，并监视目录中的所有文件以查找*通配符所指定的更改。默认情况下，该应用程序将在http：// localhost：3000 /上启动。

  输出：