JQuery悬浮层及 CSS3实现悬浮层关闭按钮

浏览数：38 / 时间：2015年06月09日

我想这样的一个需求很是会经常遇到的，研究了一下，现在记录下来，也希望分享给大家！

先看一下效果图，如下所示：

代码如下：

<span style="font-family:Times New Roman;font-size:18px;"><span style="font-family:Times New Roman;font-size:18px;"><DOCTYPE html>

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">
	$(function(){

		var docHeight = $(window).height();
		var docWidth = $(window).width();

		$("#overlay").height(docHeight).css({
			'opacity':0.8,
			'position':'absolute',
			'top':0,
			'left':0,
			'background-color':'#CCCCCC',
			'width':'100%',
			'z-index':5000
		});

		$("<div id='popDiv'><span class='close'></span></div>").appendTo("body");

		
		var adWidth = docWidth * 0.9;
		var topVal = (docHeight - adWidth) * 0.5;
		
		$("#popDiv").css({
			'top':topVal,
			'left':"2%",
			'height':adWidth
		});
	});
</script>
<style type="text/css">
	#content{
		width:100%;
		height:100px;
		line-height:100px;
		color:green;
		border:1px solid #ACE;
		text-align:center;
		font-size:30px;
	}

	/* the div container for pop layer */
	#popDiv{
		width:95%;
		height:100px;
		border:1px solid green;
		position:absolute;
		margin:0 auto;
		text-align:center;
		left:1%;
		z-index:6000;
		background-image:url(100.png);
		background-size:100% 100%;
	}

	.close{
		/* still bad on picking color */
		background: orange;
		color: red;
		/* make a round button */
		border-radius: 12px;
		/* center text */
		line-height: 20px;
		text-align: center;
		height: 20px;
		width: 20px;
		font-size: 18px;
		padding: 1px;
	}
	/* use cross as close button */
	.close::before {
		content: "\2716";//  \00D7
	}
	/* place the button on top-right */
	.close {
		top: -10px;
		right: -10px;
		position: absolute;
	}

</style>
</head>

<body>
	<div id="overlay"></div>
	<div>
		<div id="content">jQuery overlay</div>
	</div>
</body>
</html></span></span>

注：对于按钮中的叉按钮，用的是Unicode中的一种标识，以下这些也可以使用：