本文介绍如何通过 jquery 和 overhang.js 库，将用户在文本框中输入的内容动态渲染为从页面顶部滑落的美观通知栏，并附带完整可运行代码与样式定制方法。
要实现“输入文字 → 点击按钮 → 顶部弹出带自定义内容的通知栏”这一交互效果，原生 JavaScript 无法直接完成，需借助成熟的 UI 提示库。overHang.js 是一个轻量、易用且支持动画过渡的 jQuery 插件，专为创建顶部下拉式通知（toast-style）而设计。
以下是一个完整、可直接运行的 HTML 示例，已整合 jQuery、jQuery UI（overHang.js 的依赖）及 overHang.js 本身：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Textbox to Top Notification</title>
<!-- 引入 jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入 jQuery UI（必需依赖） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<!-- 引入 overHang.js 核心脚本 -->
<script src="https://cdn.jsdelivr.net/npm/overhang@1.0.4/dist/overhang.min.js"></script>
<!-- 引入 overHang.css 样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overhang@1.0.4/dist/overhang.min.css">
<!-- 自定义样式：居中、加宽通知栏 -->
<style>
.overhang {
width: 80% !important;
margin: 0 auto !important;
border-radius: 6px !important;
font-family: "Segoe UI", sans-serif;
}
</style>
</head>
<body>
<h1><span>Form Input</span> Samples</h1>
<p>Intro / JavaScript + overHang.js</p>
<article class="regular">
<h2>Textbox</h2>
<label for="tbuser">Username:</label>
<input type="text" id="tbuser" placeholder="Enter username" maxlength="10">
<input type="button" id="btn1" value="Click Me">
<p class="output" id="output1"></p>
</article>
<script>
const txt1 = document.getElementById('tbuser');
const btn1 = document.getElementById('btn1');
let intvl;
function showNotification() {
// 清除可能存在的上一次延时，避免重复触发
clearTimeout(intvl);
// 延迟 2 秒后显示通知（可根据需求调整或移除）
intvl = setTimeout(() => {
$("body").overhang({
message: `Thank you, ${txt1.value || 'anonymous'}!`,
type: "success", // 可选: success / error / warn / info
duration: 3000, // 显示时长（毫秒）
closeConfirm: false, // 是否点击后确认关闭
easing: "easeOutBounce" // 动画缓动效果
});
}, 2000);
}
btn1.addEventListener('click', showNotification);
</script>
</body>
</html>✅ 关键说明：
- overHang() 方法必须在 <body> 上调用，且依赖 jQuery 和 jQuery UI；
- message 字段支持拼接字符串，推荐对空值做兜底处理（如 txt1.value || 'anonymous'）；
- .overhang 类用于全局定制通知栏样式（宽度、圆角、字体等），注意添加 !important 保证覆盖默认样式；
- type 参数可增强语义（如 error 会自动应用红色主题），提升用户体验；
- 若需禁用延迟，直接删除 setTimeout，改为同步调用 $("body").overhang({...}) 即可。
⚠️ 注意事项：
- 不要遗漏 jQuery UI 的引入，否则 overHang.js 将报错（如 $.widget is not a function）；
- CDN 链接中的版本号（如 @1.0.4）建议锁定，避免未来兼容性问题；
- 生产环境建议下载本地资源并托管，减少对外部 CDN 的依赖。
通过以上实现，你已拥有一套简洁、可靠、可扩展的顶部通知系统——它不仅满足基础交互，还为后续集成表单验证、异步响应提示等场景打下坚实基础。
