本文实例讲述了JavaScript实现的弹出遮罩层特效。分享给大家供大家参考，具体如下：
这篇给大家分享一个简单的遮罩层特效，先上效果图。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查看，修改，删除</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
table{
width:500px;
border:1px solid blue;
border-collapse: collapse;
}
table th{
border:1px solid blue;
height:30px;
}
table td{
border:1px solid blue;
text-align:center;
height:30px;
}
table td a {
color:red;
}
div.proDiv{
width:500px;
position: absolute;
left:50%;
margin-left:-250px;
padding:10px;
border:1px solid red;
top:100px;
background: #fff;
display: none;
z-index: 3
}
div.proDiv p{
border-bottom:1px solid red;
}
div.proDiv a.close{
color:red;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>工作</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>项目经理</td>
<td>12000</td>
<td>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="view">查看</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a>
</td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>前端工程师</td>
<td>10000</td>
<td>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="view">查看</a>
