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

最新推荐文章于 2023-10-10 02:23:35 发布

原创最新推荐文章于 2023-10-10 02:23:35 发布 · 3.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#CSS3 #悬浮层 #jQuery #关闭按钮

HTML5+CSS3 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何利用CSS3和jQuery实现悬浮层功能，并详细讲述了关闭按钮的实现过程，包括代码示例和实际效果展示。

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

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

代码如下：

<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(https://blog.csdn.net/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中的一种标识，以下这些也可以使用：

标识	编码(16进制)	Name
✖	\2716	粗体乘法
✗	\2717	交叉
✘	\2718	粗体交叉
×	\00D7	乘法符号
⨯	\2A2F	向量乘积
x	\78	小写字母
X	\58	大写字母