html中的遮罩弹出框动态效果代码,JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】...

本文实例讲述了JavaScript实现的弹出遮罩层特效。分享给大家供大家参考，具体如下：

这篇给大家分享一个简单的遮罩层特效，先上效果图。

代码：

查看，修改，删除

table{

width:500px;

border:1px solid blue;

border-collapse: collapse;

}

table th{

border:1px solid blue;

height:30px;

}

table td{

border:1px solid blue;

text-align:center;

height:30px;

}

table td a {

color:red;

}

div.proDiv{

width:500px;

position: absolute;

left:50%;

margin-left:-250px;

padding:10px;

border:1px solid red;

top:100px;

background: #fff;

display: none;

z-index: 3

}

div.proDiv p{

border-bottom:1px solid red;

}

div.proDiv a.close{

color:red;

}

姓名	年龄	工作	工资	操作
张三	22	项目经理	12000	查看 修改 删除
李四	24	前端工程师	10000	查看 修改 删除
王五	21	java工程师	12000	查看 修改 删除

姓名：

年龄：

工作：

工资：

关闭

//查看操作

$('a.view').click(function(){

//获取文档的宽和高

var maskWidth = $(document).width();

var maskHeight = $(document).height();

//遮罩层初始化

$('

$('div.mask').css({

'position':'absolute',

'top':0,

'left':0,

'background':'black',

'opacity':0.5,

'width':maskWidth,

'height':maskHeight,

'z-index':2

});

var data = [];//保存数据的数组

//将一行的数据添加到数据中

$(this).parent().siblings().each(function(){

data.push($(this).text())

});

//将内容显示到弹出层中

$('div.proDiv').children().each(function(i){

$(this).children('span').text(data[i]);

});

$('div.proDiv').show();//显示弹出层

//关闭操作

$('a.close').click(function(){

$(this).parent().hide();

$('div.mask').remove();

});

});

//删除操作

$('a.del').click(function(){

$(this).parents('tr').remove();

});

页面中有一个表格，一个隐藏的弹出层，当点击查看按钮，首先创建一个遮罩层，然后获取这一行中的数据，并把数据显示到弹出层中，最后把弹出层隐藏，点击关闭按钮关闭弹出层并关闭遮罩层。点击删除按钮把这个tr删除即可。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。