Cách tạo: Snackbar / Toast

Học cách sử dụng CSS và JavaScript để tạo 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; /* Khoảng cách trong và ngoài */
  position: fixed; /* Đặt cố định ở trên cùng của màn hình */
  z-index: 1; /* Nếu cần, thêm z-index */
  left: 50%; /* Đặt hộp thông báo ở giữa */
  bottom: 30px; /* Khoảng cách từ dưới cùng 30px */
}
/* Hiện hộp thông báo khi nhấn nút (thêm lớp bằng JavaScript) */
#snackbar.show {
  visibility: visible; /* Hiện hộp thông báo */
  /* Thêm animation: làm mờ và làm sáng hộp thông báo trong 0.5 giây. Nhưng, hoãn quá trình làm mờ 2.5 giây. */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Án hiệu và làm mờ hộp thông báo */
@-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;}
}

Bước 3 - Thêm JavaScript:

Sử dụng JavaScript để thêm lớp "show" vào hộp thông báo khi nhấn nút:

function myFunction() {
  // Lấy DIV snackbar
  var x = document.getElementById("snackbar");
  // Thêm lớp "show" vào DIV
  x.className = "show";
  // 3 giây sau, xóa lớp "show" trong DIV
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

Thử ngay