显示3秒就消失的弹窗

楽焫旒璡

已于 2025-06-12 16:03:30 修改

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery 弹窗消失

于 2018-03-14 14:27:00 首次发布

本文链接：https://blog.youkuaiyun.com/Lxinccode/article/details/79554182

前端专栏收录该内容

79 篇文章

订阅专栏

图标需要可下载

效果图

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
.i_class-alert {
				width: 30px;
				height: 30px;
				display: inline-block;
				margin-top: -5px;
				background: url(http://hbkj-pc-web-img.oss-cn-beijing.aliyuncs.com/pru_bb_icon.png) -6px -7px no-repeat;
				vertical-align: middle;
			}
			
			.dp-model-alert {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9999;
				display: none;
			}
			
			.content-alert {
				width: 450px;
				height: 150px;
				background: #fff;
				position: fixed;
				top: 50%;
				left: 45%;
				margin-left: -75px;
				margin-top: -320px;
				border: 5px solid #ccc;
			}
			
			.content-top-alert {
				height: 30px;
				background: #f8f8f8;
				padding: 0 7px;
			}
			
			.left-alert {
				line-height: 30px;
				float: left;
			}
			
			.right-close-alert {
				float: right;
				line-height: 30px;
				cursor: pointer;
			}
			
			.content-bottom-alert {
				height: 120px;
				position: relative;
			}
			
			.content-bottom-c-alert {
				width: 270px;
				height: 40px;
				position: absolute;
				top: 30%;
				left: 5%;
			}
			
			.i-alert {
				width: 30px;
				height: 30px;
				display: inline-block;
				margin-top: -5px;
				background: url(http://hbkj-pc-web-img.oss-cn-beijing.aliyuncs.com/pru_bb_icon.png) -6px -7px no-repeat;
				vertical-align: middle;
			}
			
			.span-alert {
				line-height: 40px;
				margin-left: 10px;
				font-size: 16px;
			}
			
			.content-btn-alert {
				width: 125px;
				height: 40px;
				background: red;
				position: absolute;
				top: 30%;
				right: 5%;
				color: #fff;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
			}
			
			.a-alert {
				text-decoration: none;
				color: #fff;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<button class='collect-btn'>点击收藏</button>
		<div class='dp-model-alert'>
		<div class='content-alert'>
			<div class='content-top-alert'>
				<span class='left-alert span-alert'>温馨提示</span> <span
					class='right-close-alert span-alert'>✖</span>
			</div>
			<div class='content-bottom-alert'>
				<div class='content-bottom-c-alert'>
					<i class="i-alert"></i> <span
						class='text-content1-alert span-alert'>收藏成功 </span>
				</div>
				<a class="a-alert" href="/myhb/myCollection/000/produce">
					<div class='content-btn-alert'>查看收藏></div>
				</a>
			</div>
		</div>
	</div>
	</body>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		$(function() {
			$('.collect-btn').click(function() {
				$('.dp-model-alert').show().delay(3000).hide(200);//1000 表示展示3秒后消失
			})
			$('.right-close-alert').click(function() {
				$('.dp-model-alert').hide()
			})
		})
	</script>

</html>