思路: 当触发一个事件,弹出一个iframe,让这个iframe遮住后面的页面,这样后方的页面功能就会全部失效,也就可以达到一个遮罩的效果,再通过一个事件取消ifram,恢复后方页面的功能。
代码:
主页面代码:
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>mask</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mask').bind({
click:function (){
var c = "<iframe frameborder='0' class='mask'style='width:"+$(window).width()+";height:"+($(window).height())+"' src='maskContent.jsp' allowtransparency='true'></iframe>";
$('body').append(c);
}
});
});
</script>
<style type="text/css">
.mask{
display:block;
position:absolute;
z-index:100;
top: 0px;
left:0px;
filter:alpha(opacity=50);
}
body{
background-color:yellow;
}
</style>
</head>
<body>
<center>
<input type="button" value="mask" id="mask">
</center>
</body>
</html>
-------------
iframe 潜入的页面
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>mask</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#remove').bind('click',function (){
$(window.parent.document).find('iframe').remove() ;
});
});
</script>
<style type="text/css">
body{
background-color: #6C7B8B;
}
</style>
</head>
<body>
<center>
<br><br><br><br><br><br><br><br><br>
<input type="button" id="remove" value="remove">
<center>
</body>
</html>