如何做 - 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);
}
自己动手试一试 »
