前端遮罩层实现_Jquery超简单遮罩层实现代码

1.样式如下设置：

CSS代码：

#dialog{

z-index: 999;

position: absolute;

display: none;

}

#mask {

position: absolute;

top: 0px;

filter: alpha(opacity=60);

background-color: #777;

z-index: 500;

left: 0px;

display:none;

opacity:0.6;

-moz-opacity:0.5;

cursor:not-allowed;

}

其中： opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；只需要都加上，便可以火狐和IE下都可以使用。

2.指定层的高度、和宽度。

js代码

xxx = function(){

//遮罩层

//$("#mask").css("cursor","not-allowed");

$("#mask").css("width",($(document).width()+$(document).scrollLeft()));

$("#mask").css("height",($(document).scrollTop()+$(document).height()));

$("#mask").show();

//弹出层

$("#dialog").load(url);

var left =  screen.width/3 ;

var top =  screen.height/6 ;

$("#dialog").css("left",left);

$("#dialog").css("top",top)

$("#dialog").toggle();

//设置diaolog高宽

........

}

3.在

中加入如下代码，然后就可以看效果了：

html代码

4.使用方法：

在ajax提交表单后，加上showMask方法，数据返回后，加上hideMask()