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

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery遮罩层/titlestyle type='text/css'/*半透明的遮罩层*/#叠加{背景： # 000；filter: alpha(不透明度=50);/* IE的透明度*/opa city 3360 0.5；/* 透明度*/display:无；绝对位置：top: 0pxleft: 0px宽度： 100%;高度： 100%;z指数： 100；/* 此处的图层要大于页面*/display : none；_底色： # a0a0a 0；/* 解决IE6的不透明问题*/}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript '/*显示遮罩层*/函数showOverlay() { $('#overlay ').高度(文档。尸体。滚动高度)；$(“# overlay”).宽度(文档。尸体。scroll width)；//fadeTo第一个参数为速度，第二个为透明度//多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题$(“# overlay”).fadeTo(200，0.5)；//解决窗口缩小时放大后不全屏遮罩的问题//简单来说，就是窗口重置的问题$(窗口)。调整大小(函数(){ $('#overlay ')).高度(文档。尸体。滚动高度)；$(“# overlay”).宽度(文档。尸体。scroll width)；});}/* 隐藏覆盖层*/函数HideOverlay(){ $(' # Overlay ').淡出(200)；}/script/head dy button OnClick=' show overlay()；'style=' width:100px高度：60 px余量：40px汽车40px汽车；显示：块打开遮罩层/button button OnClick=' Hideoverlay()；'style=' width:100px高度：60 pxz索引：101;显示：块；位置：绝对；left:10px' top:10px '关闭遮罩层/button H3 align=' center ' a href='//www。JB 51。' net/'阅谁问君诵，水落清香浮/a/h3div style=' height :10000 px；/div div id=' overlay '/div/body/html运行效果图如下：

PS:该源码兼容IE6，火狐，谷歌，苹果，欧朋等主流的浏览器。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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