前端遮罩层实现_jQuery 实现的遮罩层效果

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

代码：

主页面代码:

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

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

+ path + "/";

%>

mask

$(document).ready(function (){

$('#mask').bind({

click:function (){

var c = "";

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

}

});

});

.mask{

display:block;

position:absolute;

z-index:100;

top: 0px;

left:0px;

filter:alpha(opacity=50);

}

body{

background-color:yellow;

}

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

iframe 潜入的页面

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

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

+ path + "/";

%>

mask

$(document).ready(function (){

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

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

});

});

body{

background-color: #6C7B8B;

}

分享到：

2011-05-20 12:55

浏览 2495

论坛回复 / 浏览 (5 / 7455)

评论

5 楼

lqixv

2011-05-26

kaobian 写道

div 在ie6中会有bug，它不能遮挡select框，你可以尝试一下

这是一个创新！

4 楼

yanzhexian

2011-05-26

kaobian 写道

div 在ie6中会有bug，它不能遮挡select框，你可以尝试一下

bgiframe

3 楼

maodun1978

2011-05-26

select的显示级别比div高，要把div放在iframe中

2 楼

kaobian

2011-05-26

div 在ie6中会有bug，它不能遮挡select框，你可以尝试一下

1 楼

fywxin

2011-05-26

div  不更好，更方便？