思路： 当触发一个事件，弹出一个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>
bgiframe
这是一个创新！