如何創建：Snackbar / Toast

學習如何使用 CSS 和 JavaScript 創建 Snackbar/Toast。

創建 Snackbar

第一步 - 添加 HTML：

<!-- 使用按鈕打開 snackbar -->
<button onclick="myFunction()">Show Snackbar</button>
<!-- 實際的 snackbar -->
<div id="snackbar">Some text some message..</div>

第二步 - 添加 CSS：

設置 snackbar 的樣式并添加動畫：

/* snackbar - 將其定位在屏幕底部和中間 */
#snackbar {
  visibility: hidden; /* 默認隱藏，點擊時可見 */
  min-width: 250px; /* 設置默認最小寬度 */
  margin-left: -125px; /* 將 min-width 的值除以2 */
  background-color: #333; /* 黑色背景色 */
  color: #fff; /* 白色文本顏色 */
  text-align: center; /* 文本居中 */
  border-radius: 2px; /* 圓角邊框 */
  padding: 16px; /* 內邊距 */
  position: fixed; /* 固定在屏幕頂部 */
  z-index: 1; /* 如果需要，添加z-index */
  left: 50%; /* 將snackbar居中 */
  bottom: 30px; /* 距離底部 30px */
}
/* 單擊按鈕時顯示 snackbar（使用 JavaScript 添加的類） */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* 添加動畫：用0.5秒淡入和淡出 snackbar。但是，將淡出過程延遲 2.5 秒。 */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* 淡入和淡出 snackbar 的動畫 */
@-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;}
}
@-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;}
}

第三步 - 添加 JavaScript：

使用 JavaScript 通過點擊按鈕向 snackbar 容器添加 "show" 類：

function myFunction() {
  // 獲取 snackbar DIV
  var x = document.getElementById("snackbar");
  // 向 DIV 添加 "show" 類
  x.className = "show";
  // 3秒后，從 DIV 中刪除 "show" 類
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

親自試一試