思路: 当触发一个事件,弹出一个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>
分享到:
相关推荐
JQUERY遮罩效果实现网页JS遮罩层,使网站不用刷新操作
利用Jquery几行代码就可以实现遮罩层的效果。
jQuery插件 实现图片文字遮罩效果 jQuery插件 实现图片文字遮罩效果 jQuery插件 实现图片文字遮罩效果
实现了全屏或者局部遮罩,遮罩显示后会在指定时间内自动关闭遮罩。
基于jquery的BlockUI做的遮罩层
实现弹出登录遮罩层效果,除弹出的登录框外,不能进行操作(下载课直接使用)
jQuery实现带有遮罩层的在线QQ客服效果源码.zip
jQuery实现鼠标滑过图片遮罩层跟随移动效果源码.zip
jquery实现点击按钮弹出带有过渡效果的遮罩层窗口动画效果源码.zip
jQuery鼠标悬停遮罩效果投票代码是一款基于jQuery实现的头像征名投票功能,鼠标经过显示征名释义。
jquery+(jquery.blockUI) 点击新闻出现遮罩效果 外加ajax读取后台数据库等操作 , 后台asp 数据库暂不上上传,如有需要可以联系我
主要介绍了jQuery遮罩层效果,结合实例形式较为详细的分析了jQuery实现遮罩层的原理与相关技术细节,需要的朋友可以参考下
jQuery遮罩效果的弹出层对话框,本效果实现了4种弹出层效果:提示层、确认框提示层、alert提示层、删除商品提示层。当弹出层显示时,网页背景变暗,单击空白处可关闭弹出层。
主要介绍了jQuery实现带遮罩层效果的blockUI弹出层,可实现带有弹出遮罩层效果的弹出对话框功能,并附带demo源码供读者下载参考,需要的朋友可以参考下
就一个html文件,代码也很少,没有用Jquery。JS遮罩效果 遮罩效果 弹出登录层JS遮罩效果 遮罩效果 弹出登录层
鼠标悬停后,逐渐加载一个图片阴影遮罩效果,主要采用jQuery的 fadeIn fadeOut 参数实现 默认遮罩层隐藏,鼠标移动到当前图片上后显示 鼠标移走后遮罩层消失 使用方法: 1、将index.html中的css...
这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用。 屁话不多放...