屏幕底部弹出窗口

---

了解如何使用 CSS 和 JavaScript 创建 snackbar / toast

---

Snackbar / Toast

Snackbars 通常用作工具提示/弹出窗口，以在屏幕底部显示消息。

单击按钮以显示 Snackbar 。3秒后消失。

Show Snackbar 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);
} 亲自试一试 »