前端技术(2) : 1秒后消失的提示框

转载已于 2025-06-19 13:39:40 修改 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://www.tongyi.com/

文章标签：

#1秒后消失的提示框 #提示框

于 2018-03-14 16:18:21 首次发布

前端专栏收录该内容

79 篇文章

订阅专栏

本文介绍了一个简单的收藏提示框实现方案，使用HTML、CSS和jQuery进行布局和交互设计，包括按钮触发、提示信息显示及自动隐藏等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

正常

警告

错误

HTML

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>简易 Toast 消息提示</title>
		<style>
			.toast {
				min-width: 160px;
				color: #fff;
				text-align: center;
				border-radius: 4px;
				padding: 12px 20px;
				position: fixed;
				z-index: 9999;
				left: 50%;
				top: 10%;
				transform: translateX(-50%);
				opacity: 1;
				transition: opacity 0.5s, transform 0.5s;
				font-size: 14px;
			}

			.toast-success {
				background-color: #aa55ff;
			}

			.toast-warning {
				background-color: #ff9800;
			}

			.toast-error {
				background-color: #f44336;
			}

		</style>
	</head>
	<body>

		<h2>点击按钮显示带类型的消息提示</h2>
		<button onclick="showToast('操作成功', 'success')">成功提示</button>
		<button onclick="showToast('请检查输入', 'warning')">警告提示</button>
		<button onclick="showToast('系统错误', 'error')">错误提示</button>

		<script>
			function showToast(message, type = 'info', duration = 2000) {

				const toast = document.createElement('div');
				toast.textContent = message;
				toast.classList.add('toast');


				// 根据类型添加新的类名
				switch (type.toLowerCase()) {
					case 'success':
						toast.classList.add('toast-success');
						break;
					case 'warning':
						toast.classList.add('toast-warning');
						break;
					case 'error':
						toast.classList.add('toast-error');
						break;
					default:
						toast.classList.add('toast-success'); // 默认为 success
						break;
				}
				// 添加到 body 中
				document.body.appendChild(toast);

				// 设置定时隐藏
				setTimeout(() => {
					if (document.body.contains(toast)) {
						document.body.removeChild(toast);
					}
				}, duration);
			}
		</script>

	</body>
</html>