如何做 - Snackbar / Toast
學習如何使用 CSS 和 JavaScript 建立 snackbar / toast。
Snackbar / Toast
Snackbars 通常用作工具提示/彈出視窗，用於在螢幕底部顯示訊息。
點選按鈕顯示 snackbar。它將在 3 秒後消失。
一些文字，一些訊息..
建立 Snackbar
步驟 1) 新增 HTML
示例
<!-- 使用按鈕開啟 snackbar -->
<button onclick="myFunction()">顯示 Snackbar</button>
<!-- 實際的 snackbar -->
<div id="snackbar">一些文字一些訊息..</div>
步驟 2) 新增 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%; /* 居中文件 */
bottom: 30px; /* 距離底部 30px */
}
/* 點選按鈕時顯示 snackbar (透過 JavaScript 新增類) */
#snackbar.show {
visibility: visible; /* 顯示 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;}
}
步驟 3) 新增 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);
}
自己動手試一試 »
