jQuery 实现的遮罩层效果
海欣海夜 2011-05-20
思路： 当触发一个事件，弹出一个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>
相关推荐
最近用phonegap在安卓手机中使用Html5+css3做页面，<a name="yes" data-role="button" style="display: block;font-size:16