使用HTML、CSS和Javascript创建SnackBar

SnackBar是一种通知栏，出现在网页底部，用于显示重要信息，通常用于确认操作或向用户提供反馈。它会在屏幕上显示几秒钟，然后消失。SnackBar是用户界面设计的重要组成部分，广泛用于Web应用程序。

方法1

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

步骤

将HTML文档的标题设置为SnackBar。
在样式部分：
- 将body的内容居中。
- 根据设计为按钮设置样式。
- 默认隐藏SnackBar。
- 为SnackBar添加显示和隐藏的动画。
将标题设置为SnackBar。
添加一个按钮和SnackBar元素。
在脚本部分：
- 创建一个函数来显示SnackBar，并在3秒后移除它。

示例

<!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。
- 另一个函数来关闭它。

示例

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

方法3

为了获得时尚优雅的外观，有必要自定义snackbar以匹配网站设计。

步骤

设置相关标题。
对内容进行样式设置。
使用CSS自定义snackbar。
添加JavaScript功能。

示例

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