Всплывающее сообщение по типу Toast

Пример

<!-- Используем кнопку, чтобы вызвать снэкбар -->
<button onclick="myFunction()">Показать сообщение</button>

<!-- Само сообщение "снэкбар" -->
<div id="snackbar">Текст сообщения..</div>

Пример

/* Положение сообщения в низу и посередине экрана */
#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 от низа экрана */
}

/* Показываем сообщение при нажатии на кнопку (добавляется JavaScript) */
#snackbar.show {
  visibility: visible; /* Показать сообщение */
  /* Добавляем анимацию: Отведем 0.5 сек. на появление и исчезание сообщения.
  При этом задержка процесса исчезания составит 2.5 сек */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Анимация появления и исчезания сообщения */
@-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;}
}

Пример

function myFunction() {
  // Находим контейнер с сообщением
  var x = document.getElementById("snackbar");

  // Добавляем контейнеру класс "show"
  x.className = "show";

  // Через 3 секунды удаляем класс "show" у контейнера с сообщением
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}