公示公告信息弹窗提示（一天只弹一次）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19

phubing

8868人浏览 · 2019-03-13 10:09:38

phubing · 2019-03-13 10:09:38 发布

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹窗提示</title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	
	.alert_windows{
		display:none;
		position:absolute;
		z-index:10;
		width:400px;
		height:300px;
		background:#566F93;
	}
	
	.alert_windows span{
		float:right;
		width:30px;
		height:30px;
		text-align:center;
		font:15px/30px Microsoft Yahei;
		cursor:pointer;
		color:#333;
		background:lightblue;
	}
	
	.alert_windows span:hover{
		color:#EEE;
		background:red;
	}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
	$(function(){
		if($.cookie("isClose") != 'yes'){
			var winWid = $(window).width()/2 - $('.alert_windows').width()/2;
			var winHig = $(window).height()/2 - $('.alert_windows').height()/2;
			$(".alert_windows").css({"left":winWid,"top":-winHig*2});	//自上而下滑出
			$(".alert_windows").show();
			$(".alert_windows").animate({"left":winWid,"top":winHig},1000);
			$(".alert_windows span").click(function(){
				$(this).parent().fadeOut(500);
				//以天为单位
				//$.cookie("isClose",'yes',{ expires:1/8640});	//测试十秒
				$.cookie("isClose",'yes',{ expires:1});		一天
			});
		}
	});
</script>
</head>

<body>

<div class="alert_windows">
	<span>X</span>
</div>

</body>
</html>

松山湖开发者村综合服务平台

助力广东及东莞地区开发者，代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展，成为松山湖开发者首选的工作与学习平台

更多推荐