html下自动消失的提示框jQuery实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动消失的提示框</title>
<style>
.toast {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
z-index: 1000;
}
</style>
</head>
<body>
<div class="toast" id="myToast">你有新的消息！</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 显示提示框
function showToast() {
$('#myToast').fadeIn(250);
// 隐藏提示框
setTimeout(function() {
$('#myToast').fadeOut(250);
}, 3000); // 设置3秒后自动消失
}
// 调用显示提示框的函数
showToast();
});
</script>
</body>
</html>这段代码使用jQuery实现了一个简单的自动消失的提示框。它首先通过CSS定义了提示框的样式，然后在JavaScript中使用jQuery库来控制提示框的显示和隐藏。当页面加载完成后，提示框会在页面上显示，并在3秒后自动消失。这个例子展示了如何结合HTML、CSS和JavaScript/jQuery来创建一个交互式的用户界面元素。
评论已关闭