本文实例讲述了jQuery实现的页面遮罩层功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=0 ' meta name=' apple-mobile-web-app-able ' content=' yes ' meta name=' apple-mobile-web-app-status-bar-style ' content=' black ' meta name=' description ' content=' aportpower '/title www . jb51 . net遮罩层/title style type='text/css ' .FH-link-bar {边框-顶部：无；} .fh-link-bar背景色： # fffborder: 1px实心# eaeaea边框-左侧：无；右边框：无；padding: 10px高度： 50px线高： 30pxfont-size : 14px} # personsex { float: right}。personsex { background:品红色；宽度： 150像素；高度： 180像素；线高： 40px文本对齐：中心；边界半径： 2pxz指数： 104；/*层级关系为104*//*只是用来控制位置的*/position:绝对值；余量： 100像素自动；font-size : 20px左： 0；右： 0；top : 0；底部： 0；} /*一定要记得添加样式（必须)*/.装载帘{位置：固定；/*窗口定位*/background: rgba(0，0，0，5);/*遮罩层的颜色*/z-index : 102；/*层级关系为102*/} .装载-阴影{身高： 100%；宽度： 100%;top : 0；左： 0；}/风格/头身！-页面上原先有的内容（用来执行点击)-截面=' FH-link-bar ' id='性记录'跨度性别/span span class=' FH-data ' id='人性别'男/span /section！-页面上原先没有的内容（用来执行点击后生成的提示框)-div class=' person sex ' style=' display : none；'p保密/p p男/p p女/p /div /body脚本src=' http : jquery-1。7 .2 .量滴js /脚本脚本类型='text/javascript' //添加页面遮罩函数addShade(){ var html height=document。尸体。滚动高度| |文档。文档元素。滚动高度；$(“正文”).追加(' div class=' loading-shade '/div ')；//$('.加载-阴影')。css('height '，HTMlHeight ' px ')；$('.加载-阴影')。CSS(' 100% ')；}/*删除页面遮罩*/函数removeShade() { $(' .加载-阴影')。移除();} /*页面遮罩点击关闭弹出层* DOM=# id * type=hide | | remove * */函数closeDiv(DOM，type) { $(' .加载-阴影')。单击(function() { type=='hide '？$(dom).hide() : $(dom).移除();$('.加载-阴影')。移除();}) } //需要调用的页面添加的js(这里是点击上边的div(即：personsex p元素)的时候实现遮罩层消失)//$('#sexlog，#personsex ').解除绑定("单击")。bind('click '，function(){//addShade()；//$('.假面性爱).show()；//});////$('.personsex p ').bind('click '，function(){//$(').加载-阴影')。移除();//$('.假面性爱).hide()；//});//======================================================================================//需要调用的页面添加的js(这里是点击遮罩层实现遮罩层（即：加载阴影)页面关闭)$('#sexlog，# personsex ').解除绑定("单击")。bind('click ')，function(){ addShade()；$('.假面性爱).show()；del()；});function del(){ $(' .加载-阴影')。bind('click '，function(){ $(').加载-阴影')。移除();$('.假面性爱).hide()；});}/脚本/html运行效果：

更多对jQuery感兴趣的读者，请查看本网站主题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》。

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