如何使用HTML，CSS和JavaScript创建Snackbar

Snackbar 在网页设计中是显示在网站上的通知。有时开发者想向用户显示额外的通知，让他们了解某些重要的信息，但同时不影响用户体验。这些信息可以是关于网站内发生或将要发生的某种事件，无论是成功与否，还是需要快速用户输入或干预的。通知SnackBar向用户通知网页将执行的处理，或者提供已经执行过的处理的反馈。例如，API调用失败等等。它们通常出现在网站的底部，并且不应该妨碍当前的流程或用户体验。它们通常会自动消失，除非需要用户干预。为了避免堵塞屏幕，SnackBar应该一次只显示一个。它们通常包含一个单独的操作，例如 关闭/取消/确定 ，同时也可以作为错误处理的一部分。也可以通过自定义操作触发，例如当用户点击一个按钮时。

Bootstrap 和 jQuery 通过类和插件对snackbar通知提供了广泛支持，但也可以通过仅使用 HTML ， CSS 和 JavaScript 设计和实现。此外，许多Web框架（如Angular 4+，ReactJS等）和Android应用程序也提供SnackBar通知的支持，它们可以使用自己的类和方法来实现。有关详细说明，请参考以下文章：

如何在Android中添加Snackbar
如何创建一个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 文件。

HTML： 在该文件中添加以下代码片段。
CSS： 默认情况下，我们使用CSS的 visibility 属性将 #snackbar HTML元素设置为隐藏。我们还为Snackbar通知定义了 position: fixed; 和 z-index: 1; CSS属性，以便在可见时始终显示在用户的屏幕上。请参考代码注释以获得更好的理解。使用 !important CSS属性表示忽略HTML DOM元素上的所有其他冲突规则，并应用由 !important 表示的规则。此规则将覆盖以前设置的所有CSS规则。我们使用简单的CSS动画来将Snackbar通知显示给用户，并淡入和淡出屏幕。关于此的详细解释可以在这里找到。为CSS动画设置的总时间取决于我们希望通知对用户可见的时间限制。在我们的示例中，将从总时间中减去0.5秒来计算 fadeout CSS动画的时间。
JavaScript： 我们使用JavaScript在单击 Show Snackbar 按钮时动态向HTML div 元素附加一个类。通过 onClick HTML按钮属性触发 showSnackbar() 函数。动态附加的类将CSS规则添加到 #snackbar HTML元素，使其对用户可见。我们使用 setTimeout() JavaScript函数在5秒后动态删除先前附加的类，这将使Snackar通知消失。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>GeeksforGeeks</title> 
    <!-- Loading External index.css file -->
    <link rel="stylesheet" href="index.css"> 
</head> 
<body> 
    <h2> 
     GeeksforGeeks - Snackbar using HTML, CSS & JS 
    </h2> 
  
    <!-- Custom Action to Trigger the Snackbar -->
    <button class="btn btn-lg" 
            onclick="showSnackbar()"> 
         Show Snackbar 
    </button> 
    <div id="snackbar">Hello GeeksforGeeks</div> 
    <!-- Loading External index.js file -->
    <script src="index.js"></script> 
</body> 
</html>

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; 
    } 
}

Javascript代码

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中，我们定义了一个自定义的 显示Snackbar 按钮，它将在屏幕上触发Snackbar通知。 Snackbar通知是一条简单的文本消息，显示给用户。由于Snackbar是一个简单的HTML“div”元素，我们可以向Snackbar通知添加自定义操作。例如，如果需要的话，可以添加一个“输入框”或“关闭按钮”。在我们的示例中，Snackbar通知将在5秒后自动从屏幕上消失。

输出：

如何使用HTML，CSS和JavaScript创建Snackbar