如何创建 - Snackbar / Toast
了解如何使用 CSS 和 JavaScript 创建 snackbar / toast
Snackbar / Toast
Snackbars 通常用作工具提示/弹出窗口，以在屏幕底部显示消息。
单击按钮以显示 Snackbar 。3秒后消失。
Some text some message..
创建一个 Snackbar
步骤 1) 添加 HTML:
实例
<!-- Use a button to open the snackbar -->
<button onclick="myFunction()">Show
Snackbar</button>
<!-- The actual snackbar -->
<div
id="snackbar">Some text some message..</div>
步骤 2) 添加 CSS:
设置 snackbar 的样式并添加动画:
实例
/* The 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;}
}
步骤 3) 添加 JavaScript:
使用 JavaScript 通过单击按钮将 "show" 类添加到 snackbar 容器:
实例
function myFunction() {
// 获取 snackbar DIV
var x = document.getElementById("snackbar");
// 将 "show" 类添加到 DIV
x.className = "show";
// 3 秒后，从 DIV 中删除 show 类
setTimeout(function(){ x.className = x.className.replace("show", ""); },3000);
}
亲自试一试 »
