Как сделать - Снэк-бар/тост
Узнать, как создать снэк-бар/тост с помощью CSS и JavaScript.
Снэк-бар/тост
Снэк-бары часто используются в качестве всплывающих подсказок / всплывающих окон, чтобы показать сообщение в нижней части экрана.
Нажмите на кнопку, чтобы показать снэк-бар. Он исчезнет через 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-индекс при необходимости */
left: 50%; /* Центр, снэк-бар */
bottom: 30px; /* 30 пикселей снизу */
}
/* Показывать снэк-бар при нажатии на кнопку (Класс добавлен с помощью 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() {
// Получить снэк-бар DIV
var x = document.getElementById("snackbar");
// Добавить "show" класс для DIV
x.className = "show";
// После 3 секунд, извлеките класс show из DIV
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
Редактор кода »
