前端技术(2) : 1秒后消失的提示框

最新推荐文章于 2024-07-23 11:05:45 发布

Lxinccode

最新推荐文章于 2024-07-23 11:05:45 发布

阅读量2.7k

点赞数 1

分类专栏：前端文章标签： 1秒后消失的提示框提示框

本文链接：https://blog.csdn.net/Lxinccode/article/details/79556266

版权

前端专栏收录该内容

63 篇文章 3 订阅

订阅专栏

需引入 jQuery, 下载 jquery-1.11.3.min.js

图标下载

css

.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;
			}

js

function show_1_sen() {
	$('.dp-model-alert').show().delay(1000).hide(200);//1000 表示展示1秒后消失
};

function hide_p() {
	$('.dp-model-alert').hide()
};

html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src='../jquery-1.11.3.min.js'></script>
		<script type="text/javascript" src="popup.js" ></script>
		<link rel="stylesheet" href="popup.css" />
	</head>

	<body>
		<button class='collect-btn' onclick="show_1_sen()">点击收藏</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' onclick="hide_p()">✖</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>


</html>