jQuery 实现的遮罩层效果

思路: 当触发一个事件,弹出一个iframe,让这个iframe遮住后面的页面,这样后方的页面功能就会全部失效,也就可以达到一个遮罩的效果,再通过一个事件取消ifram,恢复后方页面的功能。

代码:

主页面代码:

<%@ page language="java" pageEncoding="UTF-8"%>

<%

Stringpath=request.getContextPath();

StringbasePath=request.getScheme()+"://"

+request.getServerName()+":"+request.getServerPort()

+path+"/";

%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>mask</title>

<scripttype="text/javascript"src="js/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$('#mask').bind({

click:function(){

varc="<iframeframeborder='0'class='mask'style='width:"+$(window).width()+";height:"+($(window).height())+"'src='maskContent.jsp'allowtransparency='true'></iframe>";

$('body').append(c);

}

});

});

</script>

<styletype="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>

<inputtype="button"value="mask"id="mask">

</center>

</body>

</html>

-------------

iframe 潜入的页面

<%@ page language="java" pageEncoding="UTF-8"%>

<%

Stringpath=request.getContextPath();

StringbasePath=request.getScheme()+"://"

+request.getServerName()+":"+request.getServerPort()

+path+"/";

%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>mask</title>

<scripttype="text/javascript"src="js/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$('#remove').bind('click',function(){

$(window.parent.document).find('iframe').remove();

});

});

</script>

<styletype="text/css">

body{

background-color:#6C7B8B;

}

</style>

</head>

<body>

<center>

<br><br><br><br><br><br><br><br><br>

<inputtype="button"id="remove"value="remove">

<center>

</body>

</html>

相关推荐