摘要
平时编写一些简单的网站，又不想添加任何的组建和外部库，但是需要一些弹窗或者弹出信息提示条，可以自己编写一个简单的小组件。
<!DOCTYPE html>
<html>
<head>
<title>提示条示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
body{
background: #eee;
}
button{
padding: 6px 20px;
}
#app{
width: 300px;
margin:20px auto;
}
.notification-container {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.notification {
background: #fff;
color: #333;
width: 250px;
height: 70px;
line-height: 70px;
text-indent: 15px;
border-radius: 10px;
display: block;
pointer-events: auto;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="app">
<!-- 创建按钮 -->
<button onclick="createNotification()">创建</button>
<!-- 提示条容器 -->
<div id="notification-container"></div>
</div>
<script>
// 计数
let notificationCount = 0;
// 创建提示条
function createNotification() {
// 增加提示条
notificationCount++;
const notificationId = `notification-${notificationCount}`;
const notification = $(
`<div class="notification" id="${notificationId}">提示条 ${notificationCount}</div>`
);
// 添加
$("#notification-container").append(notification);
// 延时隐藏+动画
setTimeout(function() {
$(`#${notificationId}`).slideUp(500, function() {
$(this).remove();
});
}, 2000);
}
</script>
</body>
</html>演示
作者
TANKING
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。