css+jquery右下角弹框提示框(工作需要就开发调式了)
以下是一个使用CSS和jQuery创建弹框提示框的简单示例:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右下角弹框提示框</title>
<style>
.notice-box {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 15px;
border-radius: 5px;
display: none;
z-index: 1000;
}
</style>
</head>
<body>
<div class="notice-box">
调试信息: 工作需要就开发调试了!
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(function(){
$(".notice-box").fadeIn();
}, 3000); // 3秒后显示弹框
});
</script>
</body>
</html>
这段代码会在页面加载后3秒钟显示一个从右下角滑入的弹框提示框,包含文本 "调试信息: 工作需要就开发调试了!"。弹框使用了CSS的 fadeIn
效果。通过CSS样式,我们可以自定义弹框的位置、颜色、阴影和显示/隐藏动画。jQuery用于在指定的延迟后通过 fadeIn
方法显示弹框。
评论已关闭