我想这样的一个需求很是会经常遇到的，研究了一下，现在记录下来，也希望分享给大家！
先看一下效果图，如下所示：
代码如下：
<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中的一种标识，以下这些也可以使用：
| 标识 | 编码(16进制) | Name | |
| ? | \2716 | 粗体乘法 | |
| ? | \2717 | 交叉 | |
| ? | \2718 | 粗体交叉 | |
| × | \00D7 | 乘法符号 | |
| ? | \2A2F | 向量乘积 | |
| x | \78 | 小写字母 | |
| X | \58 | 大写字母 |
时间： 2024-10-13 02:22:37