jQuery 实现的遮罩层效果
1个回答
展开全部
当触发一个事件，弹出一个iframe，让这个iframe遮住后面的页面，这样后方的页面功能就会全部失效，也就可以达到一个遮罩的效果，再通过一个事件取消ifram，恢复后方页面的功能。
a.html
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>mask</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.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='b.html'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>
ssssss
<input type="button"
value="mask" id="mask">
</center>
</body>
</html>
b.html
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>mask</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
