一、展示
二、代码
遮罩层重点在：
1，head中的style css样式、
2，body內的mask显示div、
3，script中的js代码。
4，因为这里使用了一点jquery，所以需要在head中引入jquery。(我的jquery-1.11.1.min.js)
脱敏代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<%String path = request.getContextPath();%>
<head>
<title>zhezhaocengtest</title>
<!-- js-->
<script src="<%=path %>/web/Manager/js/jquery-1.11.1.min.js"></script>
<style>
/*遮罩层*/
.mask{
100%;
height: 100%;
position: fixed;
top:0;
left: 0;
display: none;
background-color: rgba(0, 0, 0, 0.6);
}
/*遮罩层显示图片部分*/
.mask .bigpic{
400px;
height: 400px;
background-color: #fff;
margin:100px auto;
}
</style>
</head>
<body >
<!-- main content start-->
<div class="tables">
<h2 class="title1" style="margin: 15px">中介</h2>
<div class="bs-example widget-shadow" data-example-id="hoverable-table">
<h4>中介列表</h4>
/*遮罩层显示图片部分start*/
<div class="mask" id="mask">
<div class="bigpic" id="bigpic">
<img style="height: 100%; 100%" >
</div>
</div>
/*遮罩层显示图片部分end*/
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>头像</th>
<th>微信</th>
</tr>
</thead>
<tbody>
<c:forEach var="it" items="${list}" varStatus="vs">
<tr>
<th>${vs.count}</th>
<td>
/*小图img上添加点击事件zhezhao();*/
<img onclick="zhezhao();" src="<%=path %>/upload/${it.pic }" >
</td>
<td>
<img onclick="zhezhao();" src="<%=path %>/web/Agent/images/${it.weixin }" >
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<script>
//获取遮罩层
var mask = document.getElementById("mask");
//遮罩层
function zhezhao(event) {
mask.style.display = "block";
//阻止冒泡
var event = event||window.event;
$('#bigpic img').attr("src",event.target.src);
// alert(event.target.src);
if (event || event.stopPropagation()){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
//遮罩层失效
document.onclick = function(event){
event = event || window.event;
//兼容获取触动事件时被传递过来的对象
var aaa =event.target?event.target:event.srcElement;
if (aaa.id != "bigpic"){
mask.style.display = "none";
}
}
</script>
</body>
</html>