本文实例讲述了jQuery实现的页面遮罩层功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="aportpower"/>
<title>www.jb51.net 遮罩层</title>
<style type="text/css">
.fh-link-bar {
border-top: none;
}
.fh-link-bar {
background-color: #fff;
border: 1px solid #eaeaea;
border-left: none;
border-right: none;
padding: 10px;
height: 50px;
line-height: 30px;
font-size: 14px;
}
#personsex{
float: right;
}
.personsex {
background: magenta;
width: 150px;
height: 180px;
line-height: 40px;
text-align: center;
border-radius: 2px;
z-index: 104; /*层级关系为104*/
/*只是用来控制位置的*/
position: absolute;
margin: 100px auto;
font-size: 20px;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/*一定要记得添加样式（必须）*/
.loading-shade {
position: fixed; /*窗口定位*/
background: rgba(0,0,0,.5); /*遮罩层的颜色*/
z-index: 102; /*层级关系为102*/
}
.loading-shade{
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<!--页面上原先有的内容（用来执行点击）-->
<section class="fh-link-bar" id="sexlog">
<span>性别</span>
<span class="fh-data" id="personsex">男</span>
</section>
<!--页面上原先没有的内容（用来执行点击后生成的提示框）-->
<div class="personsex" style="display: none;">
<p>保密</p>
<p>男</p>
<p>女</p>
</div>
</body>
<script src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">
运行效果：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。