使用 HTML、CSS 和 Javascript 创建 SnackBar

HTML CSS 前端技术 Web 开发

Snackbar 是出现在网页底部的通知栏，用于显示重要信息，通常用于确认操作或向用户提供反馈。它在屏幕上显示几秒钟后就会消失。它们是用户界面设计的必要元素，广泛应用于 Web 应用程序中。

方法 1

在这里，我们将创建一个简单基本的 Snackbar，它将显示 3 秒钟，并在用户点击“显示 Snackbar”按钮时消失。

算法

将 HTML 文档的标题设置为 Snackbar
在样式部分：

将主体内容居中。
根据设计为按钮设置样式。
默认情况下隐藏 Snackbar。
为 Snackbar 的显示和隐藏添加动画。

将标题设置为 Snackbar。
添加按钮和 Snackbar 元素。
在脚本部分：

创建一个函数来显示 Snackbar，并在 3 秒后将其移除。

示例

Open Compiler

<!DOCTYPE html>
<html>
<head>
   <title>Snackbar</title>
   <style>
      body {
         background-color:lavender;
         /* Center the contents of body */
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction:column;
      }
      /* Custom button styling */
      .button {
         display: inline-block;
         padding: 10px 20px;
         background-color: #4CAF50;
         color: white;
         border-radius: 4px;
         text-decoration: none;
         font-size: 16px;
         cursor: pointer;
      }

      /* Snackbar styling */
      #snackbar {
         /* Hide the snackbar by default */
         visibility: hidden;
         min-width: 250px;
         margin-left: -125px;
         background-color: #333;
         color: #fff;
         text-align: center;
         border-radius: 2px;
         padding: 16px;
         position: fixed;
         z-index: 1;
         left: 50%;
         bottom: 30px;
      }

      /* Show the snackbar */
      #snackbar.show {
         visibility: visible;
         /* Add animation here */
         animation: fadein 0.5s, fadeout 0.5s 2.5s;
      }

      /* Snackbar animation */
      @keyframes fadein {
         from {bottom: 0; opacity: 0;}
         to {bottom: 30px; opacity: 1;}
      }

      @keyframes fadeout {
         from {bottom: 30px; opacity: 1;}
         to {bottom: 0; opacity: 0;}
      }
   </style>
</head>
<body>
   <h1>Snackbar</h1>
   <!-- Custom button element -->
   <button class="button" onclick="showSnackbar()">Show Snackbar</button>
   <!-- Snackbar element -->
   <div id="snackbar">Welcome to Tutorialspoint!</div>
   <script>
      function showSnackbar() {
         // Get the snackbar element
         var snackbar = document.getElementById("snackbar");

         // Add the "show" class to the snackbar element
         snackbar.className = "show";

         // After 3 seconds, remove the "show" class from the snackbar element
         setTimeout(function(){ snackbar.className = snackbar.className.replace("show", ""); }, 3000);
      }
   </script>
</body>
</html>

方法 2

我们还可以为 Snackbar 添加一些操作，例如关闭，以便立即关闭或隐藏 Snackbar。

算法

将标题设置为带有关闭操作的 Snackbar。
在样式部分：

为关闭操作设置样式。
为其添加悬停效果。

将标题设置为带有关闭操作的 Snackbar。
添加按钮和 Snackbar 元素。
在脚本部分：

创建一个函数来显示 Snackbar。
另一个用于关闭它的函数。

示例

Open Compiler

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Snackbar with dismiss action</title>
   <style>
      /* Styling for the body element */
      body {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         background-color: lavender;
      }
      /* Styling for the button element */
      button {
         display: inline-block;
         padding: 10px 20px;
         background-color: #4CAF50;
         color: white;
         border-radius: 4px;
         text-decoration: none;
         font-size: 16px;
         cursor: pointer;
      }
      /* Styling for the snackbar element */
      #snackbar {
         visibility: hidden;
         min-width: 250px;
         margin-left: -125px;
         background-color: #333;
         color: #fff;
         text-align: center;
         border-radius: 2px;
         padding: 16px;
         position: fixed;
         z-index: 1;
         left: 50%;
         bottom: 30px;
         font-size: 17px;
      }
      /* Styling for the snackbar element when it is visible */
      #snackbar.show {
         visibility: visible;
         -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
         animation: fadein 0.5s, fadeout 0.5s 2.5s;
      }
      /* Animation for fading in the snackbar element */
      @-webkit-keyframes fadein {
         from {bottom: 0; opacity: 0;}
         to {bottom: 30px; opacity: 1;}
      }
      @keyframes fadein {
         from {bottom: 0; opacity: 0;}
         to {bottom: 30px; opacity: 1;}
      }
      /* Animation for fading out the snackbar element */
      @-webkit-keyframes fadeout {
         from {bottom: 30px; opacity: 1;}
         to {bottom: 0; opacity: 0;}
      }
      @keyframes fadeout {
         from {bottom: 30px; opacity: 1;}
         to {bottom: 0; opacity: 0;}
      }
      /* Styling for the dismiss action within the snackbar */
      #snackbarAction {
         color: #fff;
         cursor: pointer;
         border-radius: 2px;
         padding: 4px 8px;
         font-size: 14px;
         background-color: #5f5f5f;
         display: inline-block;
         margin-left: 16px;
      }
      /* Styling for the dismiss action within the snackbar when hovered over */
      #snackbarAction:hover {
         background-color: #4d4d4d;
      }
   </style>
</head>
<body>
   <h1>Snackbar with dismiss action</h1>
   <button onclick="showSnackbar()">Show Snackbar</button>
   <div id="snackbar">Snackbar message<span id="snackbarAction" onclick="dismissSnackbar()">Dismiss</span></div>
   <script>
      // Function to show the snackbar element
      function showSnackbar() {
         var snackbar = document.getElementById("snackbar");
         snackbar.className = "show";
      }
      // Function to dismiss the snackbar element
      function dismissSnackbar() {
         var snackbar = document.getElementById("snackbar");
         snackbar.className = "";
      }
   </script>
</body>
</html>

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

方法 3

为了获得简洁优雅的外观，需要自定义 Snackbar 以匹配网站设计。

算法

设置相关的标题。
设置主体样式。
使用 CSS 自定义 Snackbar。
添加 Javascript 功能。

示例

Open Compiler

<!DOCTYPE html>
<html>
<head>
   <title>Custom Snackbar Example</title>
   <style>
      /* styling for the body */
      body {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100vh;
         margin: 0;
         padding: 0;
         background-color: lavender;
         flex-direction: column;
      }
      /* styling for the button */
      .button {
         display: inline-block;
         padding: 10px 20px;
         background-color: #4CAF50;
         color: white;
         border-radius: 4px;
         text-decoration: none;
         font-size: 16px;
         cursor: pointer;
      }
      /* styling for the snackbar */
      .snackbar {
         background-color: #61a4f0;
         color: #fff;
         display: flex;
         align-items: center;
         justify-content: space-between;
         position: fixed;
         bottom: 20px;
         left: 50%;
         transform: translateX(-50%);
         border-radius: 40px;
         padding: 20px;
         width: 300px;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
         z-index: 1;
         animation: slideIn 0.5s ease-in-out;
      }
      /* hiding the snackbar */
      .snackbar.hidden {
         display: none;
      }
      /* styling for the snackbar dismiss button */
      .snackbar button {
         background-color: transparent;
         color: #fff;
         border:none;
         font-size: 1rem;
         font-weight: bold;
         cursor: pointer;
         margin-left: 10px;
      }
      /* defining the slide-in animation for snackbar */
      @keyframes slideIn {
         from {
            bottom: -100px;
            opacity: 0;
         }
         to {
            bottom: 20px;
            opacity: 1;
         }
      }
   </style>
</head>
<body>
   <h1>Coloured Snackbar</h1>
   <button class="button" onclick="showSnackbar()">Show Snackbar</button>
   <div id="snackbar" class="snackbar hidden">
      <span>Snackbar Message</span>
      <button onclick="hideSnackbar()">Dismiss</button>
   </div>
   <script>
      /* function to show the snackbar */
      function showSnackbar() {
         var snackbar = document.getElementById("snackbar");
         snackbar.classList.remove("hidden");
         /* hiding the snackbar after 3 seconds */
         setTimeout(function(){ snackbar.classList.add("hidden"); }, 3000);
      }

      /* function to hide the snackbar */
      function hideSnackbar() {
         var snackbar = document.getElementById("snackbar");
         snackbar.classList.add("hidden");
      }
   </script>
</body>
</html>

结论

用户界面中的 Snackbar 用于向用户显示简短明了的信息。使这些消息可关闭至关重要。它应该仅用于显示需要用户注意的重要消息。另一个重要说明是，这些消息不应包含任何机密和敏感信息。显示 Snackbar 的持续时间必须较短。

Jaisshree

更新于： 2023年5月19日

982 次浏览

开启你的职业生涯

通过完成课程获得认证

开始学习

使用 HTML、CSS 和 Javascript 创建 SnackBar

方法 1

算法

示例

方法 2

算法

示例

方法 3

算法

示例

结论

开启你的 职业生涯

开启你的职业生涯