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

  alexei 14/03/2022 - 10:44

Здесь вы узнаете, как сделать всплывающее сообщение по типу снэкбар/toast при помощи CSS и JavaScript.


Снэкбар/Toast

Так называемый "снэкбар" часто используется в качестве всплывающего сообщения/подсказки, которые появляются в нижней части экрана.

Нажмите на кнопку, чтобы вызвать снэкбар. Он пропадет через 3 секунды.

Всплывающее сообщение, которое будет показываться в течение 3 секунд.

Как сделать всплывающее сообщение "снэкбар"

Шаг 1) Добавляем HTML:


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

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

Шаг 2) Добавляем CSS:

Стили всплывающего сообщения и его анимация:


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

Шаг 3) Добавляем JavaScript:

Используем JavaScript, чтобы добавить класс "show", который делает видимым контейнер с сообщением, при нажатии на кнопку:


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

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

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