本文实例分析了jquery遮罩层效果。分享给大家供大家参考，具体如下：
先来看看示例代码：
example | xhtml1.0click
关闭

其实遮罩层原理很简单。
一个div 遮住下面的内容。
其中比较关键的一个css 样式是
x-index: 整数值
数值越大在越上层，越小就在越下层，可以是负数。
上面的js 代码有部分错误。下面已经修正。
//显示层function showbox(id) { var bh = document.body.offsetheight;//$(window).height(); var bw = document.body.offsetwidth;//$(window).width(); if (bh < $(window).height()) { bh = $(window).height(); } $(#full_box).css({width:bw,height:bh,display:block}); var objwh = getobjwh('dialog'); var tbt = objwh.split(|)[0] + px; var tbl = objwh.split(|)[1] + px; if(id=='template'){ $(#div_template).show(); }else if(id == 'history'){ $(#div_history).show(); }else{ $(#tree_+id).show(); } $(window).scroll(function (){ resetbox(id);}); $(window).resize(function (){ resetbox(id);});}//重置层function resetbox(id) { var full_box = $(#full_box).css(display); if (full_box == 'block') { var bh = document.body.offsetheight;//$(window).height(); var bw = document.body.offsetwidth;//$(window).width(); if (bh < $(window).height()) { bh = $(window).height(); } var objwh = getobjwh('dialog'); var tbt = objwh.split(|)[0] + px; var tbl = objwh.split(|)[1] + px; $(.dialog).css({top:tbt,left:tbl}); $(#full_box).css({width:bw,height:bh}); }}//获得层参数function getobjwh(obj) { var st = $(window).scrolltop(); var sl = $(window).scrollleft(); var ch = $(window).height(); var cw = $(window).width(); var objh = $(#+obj).height(); var objw = $(#+obj).width(); var objt = number(st) + (number(ch) - number(objh))/2; var objl = number(sl) + (number(cw) - number(objw))/2; return objt +| +objl;}//关闭层function closebox(id) { if(id == 'template'){ $(#div_template).hide(); }else if(id == 'history'){ $(#div_history).hide(); }else{ $(#tree_+id).hide(); } $(#full_box).hide();}
更多关于jquery特效相关内容感兴趣的读者可查看本站专题：《jquery常见经典特效汇总》
希望本文所述对大家jquery程序设计有所帮助。