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

需引入 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

 

	
		
		
		
		
		
	

	
		点击收藏
		

		

			

				温馨提示 ✖
			
			

				

					 收藏成功 
				
				
					
查看收藏>