Скрыть Toast-сообщение
Часть раздела JavaScript в действии путешествия по HTML на Coddy. Урок 12 из 27.
Задание
ЛегкоСкройте уведомление (Toast) через 3 секунды.
Мы не хотим, чтобы сообщение уведомления оставалось на экране вечно, поэтому давайте скроем его после небольшой задержки:
- Используйте
setTimeout(), чтобы создать 3-секундную задержку. - Внутри функции тайм-аута добавьте класс
"hidden"к элементу toast. - Также удалите класс
"show"у элемента toast, чтобы он плавно исчез.
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<title>Form with Toast</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Subscribe to our Newsletter</h2>
<form id="myForm">
<input type="text" id="name" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
</div>
<!-- Toast -->
<div id="toast" class="toast hidden">Form submitted successfully!</div>
<script src="script.js"></script>
</body>
</html>
Все уроки раздела JavaScript в действии
1Интерактивность/компоненты UI
ВкладкиАккордеон (развертывание/свертывание)Модальное окно (открытие/закрытие)Выпадающий список3Уведомления и обратная связь
Всплывающее сообщениеБаннеры с возможностью закрытияИндикаторы загрузкиПотренируйтесь самостоятельно: Песочница Web